Component · v2.7.0
NgbStepperComponent
Step navigation with projected content, customizable labels and icons, and explicit selection and action events.
Import
import { NgbStepperComponent } from '@angular-bootstrap/ngbootstrap';Selector:ngb-stepper
Usage notes
- Stepper is a navigation UI, not a form validator. Your application owns validation and submission. allowRevisit controls backward access; it does not enforce completion of earlier steps.
- Use [(selectedIndex)] and selectionChange for navigation. Directly setting selectedIndex does not emit navigation outputs.
- Project #stepContent with let-index="index" for content. Label templates use ngbStepLabel with let-step="step" and let-index="index"; #ngbStepperIcon customizes indicators.
- Header navigation respects disabled steps. The public next() and prev() methods move by index and do not skip disabled steps.
- The lazy input currently selects equivalent rendering branches; it does not preserve separate content instances for every step.
Declaration
class NgbStepperComponent implements AfterContentInitInputs
steps
Steps definition
steps: NgbStepperStep[]Default:[]
orientation
Orientation of the stepper
orientation: NgbStepperOrientationDefault:'horizontal'
labelPosition
Position of labels around the indicator
labelPosition: NgbStepperLabelPositionDefault:'right'
contentPosition
Position of content relative to header (horizontal only)
contentPosition: NgbStepperContentPositionDefault:'bottom'
allowRevisit
Allow navigating back to previous steps by clicking header
allowRevisit: booleanDefault:true
lazy
The installed release renders the same selected-index template in both modes. Setting false does not pre-render or retain all step panels.
lazy: booleanDefault:true
theme
Theme keyword (only CSS classes, no external deps)
theme: NgbStepperThemeDefault:'bootstrap'
responsive
Whether to apply responsive helper class
responsive: booleanDefault:true
disableAnimation
Disable transition / animation helpers
disableAnimation: booleanDefault:false
animationDuration
Animation duration (ms) for step transitions when enabled
animationDuration: numberDefault:150
nextLabel
Label strings (for i18n)
nextLabel: stringDefault:'Next'
previousLabel
Text for the Previous button.
previousLabel: stringDefault:'Previous'
resetLabel
Text for the Reset button.
resetLabel: stringDefault:'Reset'
cancelLabel
Text for the Cancel button.
cancelLabel: stringDefault:'Cancel'
optionalLabel
Text shown for an optional step.
optionalLabel: stringDefault:'Optional'
stateIcons
State-to-icon text map. Defaults: number #, done ✓, active •, error !, disabled ×.
stateIcons: Record<string, string>selectedIndex
Current selected index
selectedIndex: numberDefault:0
Outputs
selectedIndexChange
Emits when component navigation or reset changes selectedIndex. Supports [(selectedIndex)]. Direct input assignment does not emit this output.
selectedIndexChange: EventEmitter<number>selectionChange
Emits previousIndex, currentIndex and the selected step during component navigation. Reset reports both indexes as 0.
selectionChange: EventEmitter<NgbStepperSelectionChangeEvent>nextClicked
Emits the target index when next() advances; emitted before the selection events.
nextClicked: EventEmitter<number>prevClicked
Emits the target index when prev() moves back; emitted before the selection events.
prevClicked: EventEmitter<number>resetClicked
Emits when onReset() runs, before the index is reset to 0.
resetClicked: EventEmitter<void>cancelClicked
Emits when onCancel() runs. Does not reset selection or application data.
cancelClicked: EventEmitter<void>Properties
stepLabelTplDir
Custom label template (applied for all steps)
stepLabelTplDir?: NgbStepLabelDirectivecustomIconTpl
Custom icon template for step indicator
customIconTpl?: TemplateRef<any>stepContentTpl
Content template; user will typically use <ng-template #stepContent ...>
stepContentTpl?: TemplateRef<any>visitedFrom
Used when allowRevisit=false to block earlier steps
visitedFrom: numberDefault:0
stepLabelTpl
Projected shared label template, or null.
get stepLabelTpl(): TemplateRef<any> | nulllabelPositionClass
CSS helper class derived from labelPosition.
get labelPositionClass(): stringcurrentErrorMessage
Error message for the selected step, or null.
get currentErrorMessage(): string | nullMethods
stepId
Returns a step-header ID from the configured step ID or index.
stepId(i: number): stringcontentId
Returns the associated content-panel ID.
contentId(i: number): stringstepState
Uses an explicit state first, then a visited-step error, active index, earlier-index done state, disabled state, or number.
stepState(i: number): NgbStepperStateisStepInError
Returns true when a step has an errorMessage and has been visited.
isStepInError(i: number): booleanindicatorClass
Returns the CSS indicator class for the resolved state.
indicatorClass(i: number): stringdefaultIconForState
Returns the configured icon text or step number.
defaultIconForState(state: NgbStepperState, index: number): stringonHeaderClick
Selects an existing enabled header unless allowRevisit blocks an earlier index.
onHeaderClick(i: number): voidonHeaderKeydown
View keyboard handler that delegates to header selection.
onHeaderKeydown(event: KeyboardEvent | Event, i: number): voidnext
Moves to the next index, bounded by the final step, and emits nextClicked and selection events. It does not validate forms or skip disabled steps.
next(): voidprev
Moves to the previous index if allowRevisit is true and emits prevClicked and selection events.
prev(): voidonReset
Resets selection and visited tracking to the first step and emits reset and selection events.
onReset(): voidonCancel
Emits cancelClicked; application code decides what to cancel.
onCancel(): void