Emitted when the active step is changed.
<igx-stepper (activeStepChanged)="handleActiveStepChanged($event)"></igx-stepper>
Emitted when the stepper's active step is changing.
<igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
</igx-stepper>
public handleActiveStepChanging(event: IStepChangingEventArgs) {
if (event.newIndex < event.oldIndex) {
event.cancel = true;
}
}
Get/Set whether the content is displayed above the steps.
Default value is false and the content is below the steps.
this.stepper.contentTop = true;
Get/Set the type of the steps.
this.stepper.stepType = IgxStepType.Indicator;
Get/Set the position of the steps title.
The default value when the stepper is horizontally orientated is bottom.
In vertical layout the default title position is end.
this.stepper.titlePosition = IgxStepperTitlePosition.Top;
Get/Set the animation duration.
<igx-stepper [animationDuration]="500">
<igx-stepper>
Get/Set the animation type of the stepper when the orientation direction is horizontal.
Default value is grow. Other possible values are fade and none.
<igx-stepper animationType="none">
<igx-stepper>
Get/Set whether the stepper is linear.
If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.
<igx-stepper [linear]="true"></igx-stepper>
Get/Set the stepper orientation.
this.stepper.orientation = IgxStepperOrientation.Vertical;
Get all steps.
const steps: IgxStepComponent[] = this.stepper.steps;
Get/Set the animation type of the stepper when the orientation direction is vertical.
Default value is grow. Other possible values are fade and none.
<igx-stepper verticalAnimationType="none">
<igx-stepper>
Activates the step at a given index.
this.stepper.navigateTo(1);
IgxStepper provides a wizard-like workflow by dividing content into logical steps.
Igx Module
IgxStepperModule
Igx Keywords
stepper
Igx Group
Layouts
Remarks
The Ignite UI for Angular Stepper component allows the user to navigate between multiple steps. It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step. The component offers keyboard navigation and API to control the active step.
Example