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.
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.
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-stepper
element and it holds the content of each step. It also supports custom indicators, title and subtitle.Igx Module
IgxStepperModule
Igx Keywords
step
Example