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

<igx-stepper>
 ...
   <igx-step [active]="true" [completed]="true">
     ...
   </igx-step>
 ...
 </igx-stepper>

Constructors

Section titled "Constructors"

IgxStepComponent

new IgxStepComponent(): IgxStepComponent

Returns IgxStepComponent

Properties

Section titled "Properties"

activeChange

Section titled "activeChange"

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))
activeChange: EventEmitter<boolean>

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:237

cdr

Section titled "cdr" 
cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:43

completed

Section titled "completed"

Get/Set whether the step is completed.

 
completed: boolean = false

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:111

Remarks

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;

id

Section titled "id"

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;
id: string

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:62

optional

Section titled "optional"

Get/Set whether the step is optional.

 
optional: boolean = false

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:153

Remarks

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;

renderer

Section titled "renderer" 
renderer: Renderer2

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:44

stepper

Section titled "stepper" 
stepper: IgxStepper

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:42

active

Section titled "active" 
active: boolean

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:170, projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:178

disabled

Section titled "disabled" 
disabled: boolean

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:80, projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:87

isValid

Section titled "isValid" 
isValid: boolean

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:127, projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:131

Accessors

Section titled "Accessors"

index

Section titled "index"

Get the step index inside of the stepper.

const step = this.stepper.steps[1];
const stepIndex: number = step.index;
get index(): number

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:267

Returns number

tabIndex

Section titled "tabIndex" 
get tabIndex(): number

Defined in projects/igniteui-angular/stepper/src/stepper/step/step.component.ts:189

Returns number