<link rel="stylesheet" href="/styles-2YLIEYNE.css">
This site uses cookies from Google to deliver its services and to analyze traffic.
More details
Accessibility
Accordion
Bidirectionality
Clipboard
Coercion
Collections
Component Harnesses
Dialog
Drag and Drop
 Layout
Listbox
Menu
Observers
Overlay
Platform
Portal
Scrolling
Stepper
Table
Text Field
Tree
API for stepper

API reference for Angular CDK stepper

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

Selector: cdk-step

Exported as: cdkStep
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({ transform: booleanAttribute })

completed: boolean

Whether step is marked as completed.
@Input({ transform: booleanAttribute })

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({ transform: booleanAttribute })

hasError: boolean

Whether step has an error.
@Input()

label: string

Plain text label of the step.
@Input({ transform: booleanAttribute })

optional: boolean

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

state: StepState

State of the step.
@Input()

stepControl: StepControl

The top level abstract control of the step.
@Output('interacted')

interactedStream: EventEmitter<CdkStep>

Emits when the user has attempted to move away from the step.

content: TemplateRef<any>

Template for step content.

index: signal(-1)

Current index of the step within the stepper.

indicatorType: computed<StepState>(() => { const selected = this.isSelected(); const completed = this.completed; const defaultState = this._state() ?? STEP_STATE.NUMBER; const editable = this._editable(); if (this._showError() && this.hasError && !selected) { return STEP_STATE.ERROR; } if (this._displayDefaultIndicatorType) { if (!completed || selected) { return STEP_STATE.NUMBER; } return editable ? STEP_STATE.EDIT : STEP_STATE.DONE; } else { if (completed && !selected) { return STEP_STATE.DONE; } else if (completed && selected) { return defaultState; } return editable && selected ? STEP_STATE.EDIT : defaultState; } })

Type of indicator that should be shown for the step.

interacted: boolean

Whether user has attempted to move away from the step.

isNavigable: computed<boolean>(() => { const isSelected = this.isSelected(); const isCompleted = this.completed; return isCompleted || isSelected || !this._stepper.linear; })

Whether the user can navigate to the step.

isSelected: computed<boolean>(() => this._stepper.selectedIndex === this.index())

Whether the step is selected.

stepLabel: CdkStepLabel

Template for step label if it exists.
Methods
reset (): void

Resets the step to its initial state. Note that this includes resetting form data.
select (): void

Selects this step component.

Selector: [cdkStepper]

Exported as: cdkStepper
Properties
Name Description
@Input({ transform: booleanAttribute })

linear: boolean

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

orientation: StepperOrientation

Orientation of the stepper.
@Input()

selected: CdkStep | undefined

The step that is selected.
@Input({ transform: numberAttribute })

selectedIndex: number

The index of the selected step.
@Output()

selectedIndexChange: EventEmitter<number>

Output to support two-way binding on [(selectedIndex)]
@Output()

selectionChange: EventEmitter<StepperSelectionEvent>

Event emitted when the selected step has changed.

steps: QueryList<CdkStep>

Steps that belong to the current stepper, excluding ones from nested steppers.
Methods
next (): void

Selects and focuses the next step in list.
previous (): void

Selects and focuses the previous step in list.
reset (): void

Resets the stepper to its initial state. Note that this includes clearing form data.

Selector: [cdkStepLabel]

Properties
Name Description

template: inject<TemplateRef<any>>(TemplateRef)

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

Selector: button[cdkStepperNext]

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[cdkStepperPrevious]

Properties
Name Description
@Input()

type: string

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

Selector: [cdkStepHeader]

Methods
focus ():

Focuses the step header.

Change event emitted on selection changes.

Properties
Name Description

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.

Configurable options for stepper.

Properties
Name Description

displayDefaultIndicatorType: boolean

Whether the stepper should display the default indicator type or not. Default behavior is assumed to be true.

showError: boolean

Whether the stepper should display an error state or not. Default behavior is assumed to be false.

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';

Possible orientation of a stepper.

type StepperOrientation = 'horizontal' | 'vertical';

Possible controls that can be assigned to a step.

type StepControl = AbstractControl | Field;

The state of each step.

type StepState = 'number' | 'edit' | 'done' | 'error' | string;

Enum to represent the different states of the steps.

const STEP_STATE: { NUMBER: string; EDIT: string; DONE: string; ERROR: string; };

InjectionToken that can be used to specify the global stepper options.

const STEPPER_GLOBAL_OPTIONS: InjectionToken;
Azure & Blue theme selected.