# Stepper

### Uso

{% code title="page-stepper.component.html" %}

```html
<cat-toolbar [config]="getToolbarInfo()"></cat-toolbar>

<cat-stepper #stepper>
  <cat-step label="First Step">
    <div content>First</div>
    <nav actions>
      <cat-primary-button (click)="stepper.next()">Próximo</cat-primary-button>
    </nav>
  </cat-step>
  <cat-step label="Second Step">
    <div content>Second</div>
    <nav actions>
      <cat-secondary-button class="mr-5" (click)="stepper.previous()">Voltar</cat-secondary-button>
      <cat-primary-button (click)="stepper.next()">Próximo</cat-primary-button>
    </nav>
  </cat-step>
  <cat-step label="Third Step">
    <div content>Third</div>
    <nav actions>
      <cat-secondary-button (click)="stepper.previous()">Voltar</cat-secondary-button>
    </nav>
  </cat-step>
</cat-stepper>
```

{% endcode %}

{% code title="page-stepper.component.ts" lineNumbers="true" %}

```typescript
import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';

@Component({
  templateUrl: './page-stepper.component.html',
})
export class PageStepperComponent extends CatComponentBase {}
```

{% endcode %}

{% code title="page-stepper.module.ts" lineNumbers="true" %}

```typescript
import { NgModule } from '@angular/core';
import { PageStepperComponent } from './page-stepper.component';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { CatStepperModule } from '@catrx/ui/stepper';
import { CatPrimaryButtonComponent } from '@catrx/ui/button/primary';
import { CatSecondaryButtonComponent } from '@catrx/ui/button/secondary';
import { PageStepperRoutingModule } from './page-stepper.routing.module';

@NgModule({
  declarations: [PageStepperComponent],
  imports: [
    CatToolbarModule,
    CatStepperModule,
    CatPrimaryButtonComponent,
    CatSecondaryButtonComponent,
    PageStepperRoutingModule,
  ],
})
export class PageStepperModule {}
```

{% endcode %}

### Overview

{% embed url="<https://cat-ui.igordrangel.com.br/components/stepper>" %}