API reference for Angular Material stepper

import {MatStepperModule} from '@angular/material/stepper';

Stepper data that is required for internationalization.

Properties
Name Description

changes: Subject<void>

Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization.

completedLabel: string

Label that is used to indicate step as completed to screen readers.

editableLabel: string

Label that is used to indicate step as editable to screen readers.

optionalLabel: string

Label that is rendered below optional steps.

Selector: mat-step

Exported as: matStep
Properties
Name Description
@Input('aria-label')

ariaLabel: string

Aria label for the tab.
@Input('aria-labelledby')

ariaLabelledby: string

Reference to the element that the tab is labelled by. Will be cleared if aria-label is set at the same time.
@Input()

color: ThemePalette

Theme color for the particular step. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input({ transform: booleanAttribute })

completed: boolean

Whether step is marked as completed.
@Input({ transform: booleanAttribute })

editable: boolean

Whether the user can return to this step once it has been marked as completed.
@Input()

errorMessage: string

Error message to display when there's an error.
@Input({ transform: booleanAttribute })

hasError: boolean

Whether step has an error.
@Input()

label: string

Plain text label of the step.
@Input({ transform: booleanAttribute })

optional: boolean

Whether the completion of step is optional.
@Input()

state: StepState

State of the step.
@Input()

stepControl: AbstractControl

The top level abstract control of the step.
@Output('interacted')

interactedStream: EventEmitter<CdkStep>

Emits when the user has attempted to move away from the step.

content: TemplateRef<any>

Template for step content.

index: signal(-1)

Current index of the step within the stepper.

indicatorType: computed<StepState>(() => { const selected = this.isSelected(); const completed = this.completed; const defaultState = this._state() ?? STEP_STATE.NUMBER; const editable = this._editable(); if (this._showError() && this.hasError && !selected) { return STEP_STATE.ERROR; } if (this._displayDefaultIndicatorType) { if (!completed || selected) { return STEP_STATE.NUMBER; } return editable ? STEP_STATE.EDIT : STEP_STATE.DONE; } else { if (completed && !selected) { return STEP_STATE.DONE; } else if (completed && selected) { return defaultState; } return editable && selected ? STEP_STATE.EDIT : defaultState; } })

Type of indicator that should be shown for the step.

interacted: boolean

Whether user has attempted to move away from the step.

isNavigable: computed<boolean>(() => { const isSelected = this.isSelected(); const isCompleted = this.completed; return isCompleted || isSelected || !this._stepper.linear; })

Whether the user can navigate to the step.

isSelected: computed<boolean>(() => this._stepper.selectedIndex === this.index())

Whether the step is selected.

stepLabel: MatStepLabel

Content for step label given by <ng-template matStepLabel>.
Methods
isErrorState

Custom error state matcher that additionally checks for validity of interacted form.
Parameters

control

AbstractControl<any, any>

form

FormGroupDirective | NgForm

Returns
boolean

reset

Resets the step to its initial state. Note that this includes resetting form data.
select

Selects this step component.

Selector: mat-stepper mat-vertical-stepper mat-horizontal-stepper [matStepper]

Exported as: matStepper, matVerticalStepper, matHorizontalStepper
Properties
Name Description
@Input()

animationDuration: string

Duration for the animation. Will be normalized to milliseconds if no units are set.
@Input()

color: ThemePalette

Theme color for all of the steps in stepper. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input()

disableRipple: boolean

Whether ripples should be disabled for the step headers.
@Input()

headerPosition: 'top' | 'bottom'

Position of the stepper's header. Only applies in the horizontal orientation.
@Input()

labelPosition: 'bottom' | 'end'

Whether the label should display in bottom or end position. Only applies in the horizontal orientation.
@Input({ transform: booleanAttribute })

linear: boolean

Whether the validity of previous steps should be checked or not.
@Input()

orientation: StepperOrientation

Orientation of the stepper.
@Input()

selected: CdkStep | undefined

The step that is selected.
@Input({ transform: numberAttribute })

selectedIndex: number

The index of the selected step.
@Output()

animationDone: EventEmitter<void>

Event emitted when the current step is done transitioning in.
@Output()

selectedIndexChange: EventEmitter<number>

Output to support two-way binding on [(selectedIndex)]
@Output()

selectionChange: EventEmitter<StepperSelectionEvent>

Event emitted when the selected step has changed.

steps: QueryList<MatStep>

Steps that belong to the current stepper, excluding ones from nested steppers.
Methods
next

Selects and focuses the next step in list.
previous

Selects and focuses the previous step in list.
reset

Resets the stepper to its initial state. Note that this includes clearing form data.

Selector: mat-step-header

Properties
Name Description
@Input()

active: boolean

Whether the given step label is active.
@Input()

color: ThemePalette

Theme color of the step header. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/stepper/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input()

disableRipple: boolean

Whether the ripple should be disabled.
@Input()

errorMessage: string

Error message to display when there's an error.
@Input()

iconOverrides: { [key: string]: TemplateRef<MatStepperIconContext>; }

Overrides for the header icons, passed in via the stepper.
@Input()

index: number

Index of the given step.
@Input()

label: MatStepLabel | string

Label of the given step.
@Input()

optional: boolean

Whether the given step is optional.
@Input()

selected: boolean

Whether the given step is selected.
@Input()

state: StepState

State of the given step.
Methods
focus

Focuses the step header.
Parameters

origin?

FocusOrigin

options?

FocusOptions

Selector: [matStepLabel]

Properties
Name Description

template: inject<TemplateRef<any>>(TemplateRef)

Button that moves to the next step in a stepper workflow.

Selector: button[matStepperNext]

Properties
Name Description
@Input()

type: string

Type of the next button. Defaults to "submit" if not specified.

Button that moves to the previous step in a stepper workflow.

Selector: button[matStepperPrevious]

Properties
Name Description
@Input()

type: string

Type of the previous button. Defaults to "button" if not specified.

Template to be used to override the icons inside the step header.

Selector: ng-template[matStepperIcon]

Properties
Name Description
@Input('matStepperIcon')

name: StepState

Name of the icon to be overridden.

templateRef: inject<TemplateRef<MatStepperIconContext>>(TemplateRef)

Content for a mat-step that will be rendered lazily.

Selector: ng-template[matStepContent]

Template context available to an attached matStepperIcon.

Properties
Name Description

active: boolean

Whether the step is currently active.

index: number

Index of the step.

optional: boolean

Whether the step is optional.