IgxStepComponent

The step is used within the 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

new IgxStepComponent(): IgxStepComponent

Returns IgxStepComponent

Properties

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:238

cdr

cdr: ChangeDetectorRef

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

completed

Get/Set whether the step is completed.

completed: boolean = false

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

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

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:63

optional

Get/Set whether the step is optional.

optional: boolean = false

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

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

renderer: Renderer2

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

stepper

stepper: IgxStepper

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

Accessors

active

get active(): boolean

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

Returns boolean

Get/Set the active state of the step

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

this.stepper.steps[1].active = true;

set active(value: boolean): void

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

Parameters

value: boolean

Returns void

disabled

get disabled(): boolean

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

Returns boolean

Get/Set whether the step is interactable.

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

this.stepper.steps[1].disabled = true;

set disabled(value: boolean): void

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

Parameters

value: boolean

Returns void

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:268

Returns number

isValid

Get/Set whether the step is valid.

<igx-step [isValid]="form.form.valid">
     ...
     <div igxStepContent>
         <form #form="ngForm">
             ...
         </form>
     </div>
</igx-step>

get isValid(): boolean

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

Returns boolean

set isValid(value: boolean): void

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

Parameters

value: boolean

Returns void

tabIndex

get tabIndex(): number

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

Returns number