Stepper

ngb-stepper walks the user through a multi-step workflow while keeping every stage, state, and action visible. It ships with responsive layout helpers, sensible defaults for buttons, and templates so you can customize labels or icons without rebuilding the control.

Linear checkout

Enforce sequential progression and let the footer buttons advance users. Handy for payments, onboarding, or other wizard-style flows.

Step 1 of 3
Use [allowRevisit]="false" to block clicks on unfinished steps. Users move forward with the built-in buttons (which emit nextClicked/prevClicked for validation hooks). 
        <ngb-stepper [steps]="steps" [selectedIndex]="index" [allowRevisit]="false">
          <ng-template stepContent let-index="index">
          <app-step-panel [step]="steps[index]"></app-step-panel>
          </ng-template>
        </ngb-stepper>

Vertical pipeline

Allow admins to jump between steps, show per-step state, and surface async blockers such as missing approval.

Jump friendly
Recent events
  • Interact with either stepper to see emitted events.
© 2026 ngbootstrap

This project is not affiliated with ng-bootstrap or ngx-bootstrap. Those projects focus mainly on Bootstrap components for Angular. ngbootstrap focuses on Angular UI for data-heavy apps, especially Data Grid, Angular-native Form Builder, drag and drop workflows, documentation examples, and performance-focused Angular patterns.