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 used to indicate step as completed to screen readers. |
|
Label that is used to indicate step as editable to screen readers. |
|
Label that is rendered below optional steps. |
Directives
MatStepLabel
extends
CdkStepLabel
Selector: [matStepLabel]
Properties
Name | Description |
---|---|
|
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()
|
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.io/components/stepper/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input({ transform: booleanAttribute })
|
Whether step is marked as completed. |
@Input({ transform: booleanAttribute })
|
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({ transform: booleanAttribute })
|
Whether step has an error. |
@Input()
|
Plain text label of the step. |
@Input({ transform: booleanAttribute })
|
Whether the completion of step is optional. |
@Input()
|
State of the step. |
@Input()
|
The top level abstract control of the step. |
@Output('interacted')
|
Emits when the user has attempted to move away from the step. |
|
Template for step content. |
|
Whether user has attempted to move away from the step. |
|
Content for step label given by |
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. |
MatStepper
extends
CdkStepper
Selector: mat-stepper mat-vertical-stepper mat-horizontal-stepper [matStepper]
Exported as: matStepper, matVerticalStepper, matHorizontalStepperProperties
Name | Description |
---|---|
@Input()
|
Duration for the animation. Will be normalized to milliseconds if no units are set. |
@Input()
|
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.io/components/stepper/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input()
|
Whether ripples should be disabled for the step headers. |
@Input()
|
Position of the stepper's header.
Only applies in the |
@Input()
|
Whether the label should display in bottom or end position.
Only applies in the |
@Input({ transform: booleanAttribute })
|
Whether the validity of previous steps should be checked or not. |
@Input()
|
Orientation of the stepper. |
@Input()
|
The step that is selected. |
@Input({ transform: numberAttribute })
|
The index of the selected step. |
@Output()
|
Event emitted when the current step is done transitioning in. |
@Output()
|
Output to support two-way binding on |
@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()
|
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.io/components/stepper/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@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. |
|
Parameters | |
origin? FocusOrigin
|
|
options? FocusOptions
|
|
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. |
|
MatStepContent
Content for a mat-step
that will be rendered lazily.
Selector: ng-template[matStepContent]
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.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
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. |
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options StepperHarnessFilters = {}
|
Options for filtering which stepper instances are considered a match. |
Returns | |
HarnessPredicate<MatStepperHarness>
|
a |
MatStepHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard Angular Material step in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAllChildLoaders
|
|
---|---|
Parameters | |
selector S
|
|
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 S
|
|
Returns | |
Promise<HarnessLoader>
|
|
async
getHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T>
|
|
async
getHarnessOrNull
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
Returns | |
Promise<T | null>
|
|
async
getLabel
|
|
---|---|
Gets the label of the step. |
|
Returns | |
Promise<string>
|
|
async
getRootHarnessLoader
|
|
---|---|
Returns | |
Promise<HarnessLoader>
|
|
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
hasHarness
|
|
---|---|
Parameters | |
query HarnessQuery<T>
|
|
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. |
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options StepHarnessFilters = {}
|
Options for filtering which steps are considered a match. |
Returns | |
HarnessPredicate<MatStepHarness>
|
a |
MatStepperNextHarness
Harness for interacting with a standard Angular Material stepper next button in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
click | |
---|---|
Clicks the button. |
|
Returns | |
Promise<void>
|
|
getText | |
---|---|
Gets the text of the button. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options StepperButtonHarnessFilters = {}
|
Options for filtering which steps are considered a match. |
Returns | |
HarnessPredicate<MatStepperNextHarness>
|
a |
MatStepperPreviousHarness
Harness for interacting with a standard Angular Material stepper previous button in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
click | |
---|---|
Clicks the button. |
|
Returns | |
Promise<void>
|
|
getText | |
---|---|
Gets the text of the button. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options StepperButtonHarnessFilters = {}
|
Options for filtering which steps are considered a match. |
Returns | |
HarnessPredicate<MatStepperPreviousHarness>
|
a |
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. |