Stepper

API for stepper

API reference for Angular CDK stepper

import {CdkStepperModule} from '@angular/cdk/stepper';

Selector: cdk-step

Exported as: cdkStep
Properties
NameDescription
@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

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: CdkStepLabel

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.

Selector: [cdkStepper]

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

selectionChange: EventEmitter<StepperSelectionEvent>

Event emitted when the selected step has changed.

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: [cdkStepLabel]

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

Selector: button[cdkStepperNext]

Properties
NameDescription
@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[cdkStepperPrevious]

Properties
NameDescription
@Input()

type: string

Type of the previous button. Defaults to "button" if not specified.

Change event emitted on selection changes.

Properties
NameDescription

previouslySelectedIndex: number

Index of the step previously selected.

previouslySelectedStep: CdkStep

The step instance previously selected.

selectedIndex: number

Index of the step now selected.

selectedStep: CdkStep

The step instance now selected.
Contents