The ngs-stepper component is a ready-made visual wizard for related steps in one process. Use it for onboarding, checkout, setup, import flows, and multi-step forms where users need to see the current step, move forward and back, and optionally validate each step before continuing.
| Prop | Type | Default |
|---|---|---|
headerPosition Whether the stepper header is displayed at the top or bottom of the page | 'top' | 'bottom' | 'top' |
labelPosition Whether the label should appear or not | 'top' | 'bottom' | 'top' |
stickyHeader Whether the horizontal stepper header should stick to the top of its scroll container | boolean | false |
hideHeaderBorder Whether the horizontal stepper header border should be hidden | boolean | false |
orientation The orientation of the stepper | StepperOrientation | 'horizontal' |
linear Whether the stepper is linear | boolean | false |
selectedIndex The index of the selected step | number | 0 |
isFirstStep Computed signal that returns true when the selected step is the first step | Signal<boolean> | - |
isLastStep Computed signal that returns true when the selected step is the last step | Signal<boolean> | - |
animationDone Event emitted when the step transition animation is done | EventEmitter<void> | - |
selectionChange Event emitted when the selected step has changed | EventEmitter<StepperSelectionEvent> | - |
| ngs-step Prop | Type | Default |
|---|---|---|
label The label for the step | string | - |
errorMessage The error message for the step | string | - |
state The state of the step | StepState | - |
editable Whether the step is editable | boolean | true |
optional Whether the step is optional | boolean | false |
completed Whether the step is completed | boolean | false |
hasError Whether the step has an error | boolean | false |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.