API reference for Angular CDK stepper
import {CdkStepperModule} from '@angular/cdk/stepper';
Directives
CdkStep
Selector: cdk-step
Exported as: cdkStepProperties
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({ 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. |
|
Template for step label if it exists. |
Methods
reset | |
---|---|
Resets the step to its initial state. Note that this includes resetting form data. |
select | |
---|---|
Selects this step component. |
CdkStepper
Selector: [cdkStepper]
Exported as: cdkStepperProperties
Name | Description |
---|---|
@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()
|
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. |
CdkStepLabel
Selector: [cdkStepLabel]
Properties
Name | Description |
---|---|
|
CdkStepperNext
Button that moves to the next step in a stepper workflow.
Selector: button[cdkStepperNext]
Properties
Name | Description |
---|---|
@Input()
|
Type of the next button. Defaults to "submit" if not specified. |
CdkStepperPrevious
Button that moves to the previous step in a stepper workflow.
Selector: button[cdkStepperPrevious]
Properties
Name | Description |
---|---|
@Input()
|
Type of the previous button. Defaults to "button" if not specified. |
CdkStepHeader
Selector: [cdkStepHeader]
Methods
focus | |
---|---|
Focuses the step header. |
Classes
StepperSelectionEvent
Change event emitted on selection changes.
Properties
Name | Description |
---|---|
|
Index of the step previously selected. |
|
The step instance previously selected. |
|
Index of the step now selected. |
|
The step instance now selected. |
Interfaces
StepperOptions
Configurable options for stepper.
Properties
Name | Description |
---|---|
|
Whether the stepper should display the default indicator type or not. Default behavior is assumed to be true. |
|
Whether the stepper should display an error state or not. Default behavior is assumed to be false. |
Type aliases
StepContentPositionState
Position state of the content of each step in stepper that is used for transitioning the content into correct position upon step selection change.
type StepContentPositionState = 'previous' | 'current' | 'next';
StepperOrientation
Possible orientation of a stepper.
type StepperOrientation = 'horizontal' | 'vertical';
StepState
The state of each step.
type StepState = 'number' | 'edit' | 'done' | 'error' | string;
Constants
STEP_STATE
Enum to represent the different states of the steps.
const STEP_STATE: { NUMBER: string; EDIT: string; DONE: string; ERROR: string; };
STEPPER_GLOBAL_OPTIONS
InjectionToken that can be used to specify the global stepper options.
const STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;