API reference for Angular Material stepper
import {MatStepperModule} from '@angular/material/stepper';
Services
MatStepperIntl
Stepper data that is required for internationalization.
Properties
Name | Description |
---|---|
|
Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization. |
|
Label that is rendered below optional steps. |
Directives
MatStepLabel
extends
CdkStepLabel
Selector: [matStepLabel]
MatStep
extends
CdkStep
Selector: mat-step
Exported as: matStepProperties
Name | Description |
---|---|
@Input('aria-label')
|
Aria label for the tab. |
@Input('aria-labelledby')
|
Reference to the element that the tab is labelled by.
Will be cleared if |
@Input()
|
Whether step is marked as completed. |
@Input()
|
Whether the user can return to this step once it has been marked as completed. |
@Input()
|
Error message to display when there's an error. |
@Input()
|
Whether step has an error. |
@Input()
|
Plain text label of the step. |
@Input()
|
Whether the completion of step is optional. |
@Input()
|
State of the step. |
@Input()
|
The top level abstract control of the step. |
|
Template for step content. |
|
Whether user has seen the expanded step content or not. |
|
Content for step label given by |
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. |
MatStepper
extends
CdkStepper
Selector: [matStepper]
Properties
Name | Description |
---|---|
@Input()
|
Whether ripples should be disabled for the step headers. |
@Input()
|
Whether the validity of previous steps should be checked or not. |
@Input()
|
The step that is selected. |
@Input()
|
The index of the selected step. |
@Output()
|
Event emitted when the current step is done transitioning in. |
@Output()
|
Event emitted when the selected step has changed. |
|
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. |
MatHorizontalStepper
extends
MatStepper
Selector: mat-horizontal-stepper
Exported as: matHorizontalStepperProperties
Name | Description |
---|---|
@Input()
|
Whether ripples should be disabled for the step headers. |
@Input()
|
Whether the label should display in bottom or end position. |
@Input()
|
Whether the validity of previous steps should be checked or not. |
@Input()
|
The step that is selected. |
@Input()
|
The index of the selected step. |
@Output()
|
Event emitted when the current step is done transitioning in. |
@Output()
|
Event emitted when the selected step has changed. |
|
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. |
MatVerticalStepper
extends
MatStepper
Selector: mat-vertical-stepper
Exported as: matVerticalStepperProperties
Name | Description |
---|---|
@Input()
|
Whether ripples should be disabled for the step headers. |
@Input()
|
Whether the validity of previous steps should be checked or not. |
@Input()
|
The step that is selected. |
@Input()
|
The index of the selected step. |
@Output()
|
Event emitted when the current step is done transitioning in. |
@Output()
|
Event emitted when the selected step has changed. |
|
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. |
MatStepperNext
extends
CdkStepperNext
Button that moves to the next step in a stepper workflow.
Selector: button[matStepperNext]
Properties
Name | Description |
---|---|
@Input()
|
Type of the next button. Defaults to "submit" if not specified. |
MatStepperPrevious
extends
CdkStepperPrevious
Button that moves to the previous step in a stepper workflow.
Selector: button[matStepperPrevious]
Properties
Name | Description |
---|---|
@Input()
|
Type of the previous button. Defaults to "button" if not specified. |
MatStepHeader
extends
CdkStepHeader
Selector: mat-step-header
Properties
Name | Description |
---|---|
@Input()
|
Whether the given step label is active. |
@Input()
|
Whether the ripple should be disabled. |
@Input()
|
Error message to display when there's an error. |
@Input()
|
Overrides for the header icons, passed in via the stepper. |
@Input()
|
Index of the given step. |
@Input()
|
Label of the given step. |
@Input()
|
Whether the given step is optional. |
@Input()
|
Whether the given step is selected. |
@Input()
|
State of the given step. |
Methods
focus | |
---|---|
Focuses the step header. |
MatStepperIcon
Template to be used to override the icons inside the step header.
Selector: ng-template[matStepperIcon]
Properties
Name | Description |
---|---|
@Input('matStepperIcon')
|
Name of the icon to be overridden. |
|
Interfaces
MatStepperIconContext
Template context available to an attached matStepperIcon
.
Properties
Name | Description |
---|---|
|
Whether the step is currently active. |
|
Index of the step. |
|
Whether the step is optional. |
API reference for Angular Material stepper-testing
import {MatStepperHarness} from '@angular/material/stepper/testing';
Classes
MatStepperHarness
extends
ComponentHarness
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 |
|
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. |
MatStepHarness
extends
ContentContainerComponentHarness
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 |
|
Returns | |
Promise<string | null>
|
|
async
getAriaLabelledby
|
|
---|---|
Gets the value of the |
|
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
|
|
Returns | |
Promise<boolean>
|
|
async
host
|
|
---|---|
Gets a |
|
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. |
MatStepperNextHarness
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 |
|
Returns | |
Promise<TestElement>
|
|
MatStepperPreviousHarness
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 |
|
Returns | |
Promise<TestElement>
|
|
Interfaces
StepHarnessFilters
A set of criteria that can be used to filter a list of MatStepHarness
instances.
Properties
Name | Description |
---|---|
|
Only find completed steps. |
|
Only find steps that have errors. |
|
Only find instances whose label matches the given value. |
|
Only find steps with the given selected state. |
StepperHarnessFilters
A set of criteria that can be used to filter a list of MatStepperHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose orientation matches the given value. |
StepperButtonHarnessFilters
A set of criteria that can be used to filter a list of
MatStepperNextHarness
and MatStepperPreviousHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances whose text matches the given value. |