Emitted when the step's active property changes. Can be used for two-way binding.
<igx-step [(active)]="this.isActive">
</igx-step>
const step: IgxStepComponent = this.stepper.step[0];
step.activeChange.subscribe((e: boolean) => console.log("Step active state change to ", e))
Get/Set whether the step is completed.
When set to true the following separator is styled solid.
<igx-stepper>
...
<igx-step [completed]="true"></igx-step>
...
</igx-stepper>
this.stepper.steps[1].completed = true;
Get/Set the id of the step component.
Default value is "igx-step-0";
<igx-step id="my-first-step"></igx-step>
const stepId = this.step.id;
Get/Set whether the step is optional.
Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e. if optional step is invalid the user could still move to the next step.
<igx-step [optional]="true"></igx-step>
this.stepper.steps[1].optional = true;
Get/Set the active state of the step
<igx-step [active]="true"></igx-step>
this.stepper.steps[1].active = true;
Get/Set whether the step is interactable.
<igx-stepper>
...
<igx-step [disabled]="true"></igx-step>
...
</igx-stepper>
this.stepper.steps[1].disabled = true;
Get the step index inside of the stepper.
const step = this.stepper.steps[1];
const stepIndex: number = step.index;
Get/Set whether the step is valid.
<igx-step [isValid]="form.form.valid">
...
<div igxStepContent>
<form #form="ngForm">
...
</form>
</div>
</igx-step>
The IgxStepComponent is used within the
igx-stepperelement and it holds the content of each step. It also supports custom indicators, title and subtitle.Igx Module
IgxStepperModule
Igx Keywords
step
Example