IgxStepperComponent

Description

IgxStepperComponent is a collection of IgxStepComponents that delivers a wizard-like workflow:

A complete walkthrough of how to get started can be found here. The specification for the stepper can be found here

---

Usage

<igx-stepper>
   <igx-step *ngFor="let step of stepsData" [disabled]=”step.disabled”>
      <igx-icon igxStepIndicator>
	      {{step.indicator}}
	  </igx-icon>

      <p igxStepTitle>
	      {{step.title}}
	  </p>

      <div igxStepContent>
         ...
      </div>
    </igx-step>
</igx-stepper>

---

Keyboard Navigation

The keyboard can be used to navigate through all steps in the stpper.

Disabled steps are not counted as visible steps for the purpose of keyboard navigation.

Keys	Description
ARROW DOWN	Focuses the next step header in a vertical stepper.
ARROW UP	Focuses the previous step header in a vertical stepper.
TAB	Moves the focus to the next tabbable element.
SHIFT + TAB	Moves the focus to the previous tabbable element.
HOME	Moves the focus to the header of the FIRST enabled step in the igx-stepper
END	Moves the focus to the header of the LAST enabled step in the igx-stepper
ARROW RIGHT	Moves the focus to the header of the next accessible step in both orientations.
ARROW LEFT	Moves the focus to the header of the previous accessible step in both orientations.
ENTER / SPACE	Activates the currently focused step.
CLICK	Activates the currently focused step.

By design when the user presses the Tab key over the step header the focus will move to the step content container. In case the container should be skipped the developer should set the content container [tabIndex]="-1"

---

API Summary

IgxStepperComponent

Accessors

Get

Name	Description	Type
steps	Gets the steps that are rendered in the stepper.	IgxStepComponent[]

Properties

Name	Description	Type
id	The id of the stepper. Bound to attr.id	string
orientation	Gets/sets the orientation of the stepper. Default is horizontal.	IgxStepperOrientation
stepType	Gets/sets the type of the steps in the stepper. Default value is full	IgxStepType
titlePosition	Gets/sets the position of the titles in the stepper. Default value is bottom when the stepper is horizontally orientated and end when the layout is set to vertical.	IgxStepperTitlePosition
linear	Whether the validity of previous steps should be checked and only in case, it's valid to be able to move forward or not. Default value is false.	boolean
contentTop	Whether the steps content should be displayed above the steps header when the stepper orientation is Horizontal. Default value is false.	boolean
verticalAnimationType	Gets/sets the animation type of the stepper when the orientation direction is vertical. Default value is grow.	VerticalAnimationType
horizontalAnimationType	Gets/sets the animation type of the stepper when the orientation direction is horizontal. Default value is slide.	HorizontalAnimationType
animationDuration	320	number

Methods

Name	Description	Parameters	Returns
navigateTo	Activates the step given by index.	index: number	void
next	Activates the next enabled step.		void
prev	Activates the previous enabled step.		void
reset	Resets the stepper to its initial state.		void

Events

Name	Description	Cancelable	Arguments
activeStepChanging	Emitted when the active step is about to change.	true	{ oldIndex: number, newIndex: number, owner: IgxStepperComponent, cancel: boolean }
activeStepChanged	Emitted when the active step is changed.	false	{ index: number, owner: IgxStepperComponent }

IgxStepComponent

Accessors

Get

Name	Description	Type
index	Gets the step index inside of the stepper.	number

Properties

Name	Description	Type
id	The id of the step. Bound to attr.id	string
disabled	Gets/sets whether the step is interactable.	boolean
active	Gets/sets whether the step is activе. Two-way data binding.	boolean
optional	Gets/sets whether the step is optional.	boolean
complete	Gets/sets whether the step is completed.	boolean
isValid	Gets/sets whether the step is valid. Default value is true.	boolean

Events

Name	Description	Cancelable	Parameters
activeChange	Emitted when the step's active property changes	false	boolean