Stepper

Autocomplete
Badge
Bottom Sheet
Button
Button toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion Panel
Form field
Grid list
Icon
Input
List
Menu
Paginator
Progress bar
Progress spinner
Radio button
Ripples
Select
Sidenav
Slide toggle
Slider
Snackbar
Sort header
Stepper
Table
Tabs
Toolbar
Tooltip
Tree
API for stepper

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.

optionalLabel: string

Label that is rendered below optional steps.

Selector: [matStepLabel]

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()

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 completed.
@Input()

errorMessage: string

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

hasError: boolean

Whether step has an error.
@Input()

label: string

Plain text label of the step.
@Input()

optional: boolean

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

state: StepState

State of the step.
@Input()

stepControl: AbstractControlLike

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

form

NgForm | FormGroupDirective

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
Name Description
@Input()

disableRipple: boolean

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

linear: boolean

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

selected: CdkStep

The step that is selected.
@Input()

selectedIndex: number

The index of the selected step.
@Output()

animationDone: EventEmitter<void>

Event emitted when the current step is done transitioning in.
@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-horizontal-stepper

Exported as: matHorizontalStepper
Properties
Name Description
@Input()

disableRipple: boolean

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

labelPosition: 'bottom' | 'end'

Whether the label should display in bottom or end position.
@Input()

linear: boolean

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

selected: CdkStep

The step that is selected.
@Input()

selectedIndex: number

The index of the selected step.
@Output()

animationDone: EventEmitter<void>

Event emitted when the current step is done transitioning in.
@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-vertical-stepper

Exported as: matVerticalStepper
Properties
Name Description
@Input()

disableRipple: boolean

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

linear: boolean

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

selected: CdkStep

The step that is selected.
@Input()

selectedIndex: number

The index of the selected step.
@Output()

animationDone: EventEmitter<void>

Event emitted when the current step is done transitioning in.
@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.

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.

Selector: mat-step-header

Properties
Name Description
@Input()

active: boolean

Whether the given step label is active.
@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.

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: TemplateRef<MatStepperIconContext>

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.

API reference for Angular Material stepper-testing

import {MatStepperHarness} from '@angular/material/stepper/testing';

Harness for interacting with a standard Material stepper in tests.

Methods
async
getOrientation

Gets the orientation of the stepper.
Returns
Promise<StepperOrientation>

async
getSteps

Gets the list of steps in the stepper.
Parameters

filter

StepHarnessFilters = {}

Optionally filters which steps are included.
Returns
Promise<MatStepHarness[]>

async
host

Gets a Promise for the TestElement representing the host element of the component.
Returns
Promise<TestElement>

async
selectStep

Selects a step in this stepper.
Parameters

filter

StepHarnessFilters = {}

An optional filter to apply to the child steps. The first step matching the filter will be selected.
Returns
Promise<void>

Promise that resolves when the action completes.

Harness for interacting with a standard Angular Material step in tests.

Methods
async
getAllChildLoaders
Parameters

selector

string

Returns
Promise<HarnessLoader[]>

async
getAllHarnesses
Parameters

query

HarnessQuery<T>

Returns
Promise<T[]>

async
getAriaLabel

Gets the aria-label of the step.
Returns
Promise<string | null>

async
getAriaLabelledby

Gets the value of the aria-labelledby attribute.
Returns
Promise<string | null>

async
getChildLoader
Parameters

selector

string

Returns
Promise<HarnessLoader>

async
getHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<T>

async
getLabel

Gets the label of the step.
Returns
Promise<string>

async
hasErrors

Whether the step is currently showing its error state. Note that this doesn't mean that there are or aren't any invalid form controls inside the step, but that the step is showing its error-specific styling which depends on there being invalid controls, as well as the ErrorStateMatcher determining that an error should be shown and that the showErrors option was enabled through the STEPPER_GLOBAL_OPTIONS injection token.
Returns
Promise<boolean>

async
host

Gets a Promise for the TestElement representing the host element of the component.
Returns
Promise<TestElement>

async
isCompleted

Whether the step has been filled out.
Returns
Promise<boolean>

async
isOptional

Whether the step is optional.
Returns
Promise<boolean>

async
isSelected

Whether the step is selected.
Returns
Promise<boolean>

async
select

Selects the given step by clicking on the label. The step may not be selected if the stepper doesn't allow it (e.g. if there are validation errors).
Returns
Promise<void>

Promise that resolves when the action completes.

Harness for interacting with a standard Angular Material stepper next button in tests.

Methods
click
Returns
Promise<void>

getText
Returns
Promise<string>

async
host

Gets a Promise for the TestElement representing the host element of the component.
Returns
Promise<TestElement>

Harness for interacting with a standard Angular Material stepper previous button in tests.

Methods
click
Returns
Promise<void>

getText
Returns
Promise<string>

async
host

Gets a Promise for the TestElement representing the host element of the component.
Returns
Promise<TestElement>

A set of criteria that can be used to filter a list of MatStepHarness instances.

Properties
Name Description

completed: boolean

Only find completed steps.

invalid: boolean

Only find steps that have errors.

label: string | RegExp

Only find instances whose label matches the given value.

selected: boolean

Only find steps with the given selected state.

A set of criteria that can be used to filter a list of MatStepperHarness instances.

Properties
Name Description

orientation: StepperOrientation

Only find instances whose orientation matches the given value.

A set of criteria that can be used to filter a list of MatStepperNextHarness and MatStepperPreviousHarness instances.

Properties
Name Description

text: string | RegExp

Only find instances whose text matches the given value.
Stepper
Testing