constructor

• new IgxStepComponent(): IgxStepComponent

  Returns IgxStepComponent

activeChange

<igx-step [(active)]="this.isActive">
</igx-step>
Copy

const step: IgxStepComponent = this.stepper.step[0];
step.activeChange.subscribe((e: boolean) => console.log("Step active state change to ", e))
Copy

cdr

completed

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

this.stepper.steps[1].completed = true;
Copy

id

<igx-step id="my-first-step"></igx-step>
Copy

const stepId = this.step.id;
Copy

optional

<igx-step [optional]="true"></igx-step>
Copy

this.stepper.steps[1].optional = true;
Copy

renderer

stepper

active

• get active(): boolean

  Returns boolean

• set active(value: boolean): void

  Get/Set the active state of the step

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

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

  Parameters

  • value: boolean

  Returns void

disabled

• get disabled(): boolean

  Returns boolean

• set disabled(value: boolean): void

  Get/Set whether the step is interactable.

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

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

  Parameters

  • value: boolean

  Returns void

index

• get index(): number

  Get the step index inside of the stepper.

  const step = this.stepper.steps[1];
  const stepIndex: number = step.index;
  Copy

  Returns number

isValid

• get isValid(): boolean

  Get/Set whether the step is valid.

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

  Returns boolean

• set isValid(value: boolean): void

  Parameters

  • value: boolean

  Returns void

tabIndex

• get tabIndex(): number

  Returns number