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

cdr

cdr: ChangeDetectorRef

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

completed

Get/Set whether the step is completed.

completed: boolean = false

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

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

optional

Get/Set whether the step is optional.

optional: boolean = false

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

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

stepper

stepper: IgxStepper

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

Accessors

active

get active(): boolean

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

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

Parameters

value: boolean

Returns void

disabled

get disabled(): boolean

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

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

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

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

Returns boolean

set isValid(value: boolean): void

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

Parameters

value: boolean

Returns void

tabIndex

get tabIndex(): number

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

Returns number