Stepper overview

NbStepperComponent

Stepper component

Installation

Import NbStepperModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbStepperModule,
  ],
})
export class PageModule { }

Usage

If step label is string you can pass it as label attribute. Otherwise ng-template should be used:

// ...
<nb-stepper orientation="horizontal">
  <nb-step label="step number one">
      // ... step content here
  </nb-step>
  <nb-step label="stepLabel">
      <ng-template #stepLabel>
          <div>
              step number two
          </div>
      </ng-template>
      // ... step content here
  </nb-step>
</nb-stepper>

When linear mode enabled user can't move forward unless current step is complete.

Specify [stepControl]="form" and stepper allow go to the next step only if form is valid. You can disable it via linear mode setting.

// ...
<nb-stepper  orientation="horizontal">
  <nb-step label="step number one" [stepControl]="form">
    <form [formGroup]="form">
      // ...
    </form>
  </nb-step>
   // ...
</nb-stepper>

Stepper component has two layout options - vertical & horizontal

disableStepNavigation disables navigation by clicking on steps, so user can navigate only using 'nbStepperPrevious' and 'nbStepperNext' buttons.

NbStepComponent

Component intended to be used within the <nb-stepper> component. Container for a step