Stepper

API for stepper

API reference for Angular Material stepper

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

Stepper data that is required for internationalization.

Properties
NameDescription

changes: Subject<void>

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

optionalLabel: string

Label that is rendered below optional steps.

Selector: [matStepLabel]

Selector: mat-step

Exported as: matStep
Properties
NameDescription
@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()

completed: boolean

Whether step is marked as completed.

@Input()

editable: boolean

Whether the user can return to this step once it has been marked as complted.

@Input()

label: string

Plain text label of the step.

@Input()

optional: boolean

Whether the completion of step is optional.

@Input()

stepControl: AbstractControl

The top level abstract control of the step.

content: TemplateRef<any>

Template for step content.

interacted: false

Whether user has seen the expanded step content or not.

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

FormControl | null

form

FormGroupDirective | NgForm | null

Returns
boolean

reset

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

select

Selects this step component.

Selector: [matStepper]

Properties
NameDescription
@Output()

animationDone: EventEmitter<void>

Event emitted when the current step is done transitioning in.

Selector: mat-horizontal-stepper

Exported as: matHorizontalStepper
Properties
NameDescription
@Output()

animationDone: EventEmitter<void>

Event emitted when the current step is done transitioning in.

Selector: mat-vertical-stepper

Exported as: matVerticalStepper
Properties
NameDescription
@Output()

animationDone: EventEmitter<void>

Event emitted when the current step is done transitioning in.

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

Selector: button[matStepperNext]

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

Selector: button[matStepperPrevious]

Selector: mat-step-header

Properties
NameDescription
@Input()

active: boolean

Whether the given step label is active.

@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: string

State of the given step.

Methods
focus

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

Selector: ng-template[matStepperIcon]

Properties
NameDescription
@Input('matStepperIcon')

name: 'edit' | 'done' | 'number'

Name of the icon to be overridden.

templateRef: TemplateRef<MatStepperIconContext>

Template context available to an attached matStepperIcon.

Properties
NameDescription

active: boolean

Whether the step is currently active.

index: number

Index of the step.

optional: boolean

Whether the step is optional.