IgxStepper provides a wizard-like workflow by dividing content into logical steps.
Igx Module
IgxStepperModule
Igx Keywords
stepper
Igx Group
Layouts

Remarks

[object Object]

Example

<igx-stepper>
 <igx-step [active]="true">
     <igx-icon igxStepIndicator>home</igx-icon>
     <p igxStepTitle>Home</p>
     <div igxStepContent>
        ...
     </div>
 </igx-step>
 <igx-step [optional]="true">
     <div igxStepContent>
         ...
     </div>
 </igx-step>
 <igx-step>
     <div igxStepContent>
         ...
     </div>
 </igx-step>
</igx-stepper>

Constructors

Section titled "Constructors"

IgxStepperComponent

new IgxStepperComponent(): IgxStepperComponent

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

Returns IgxStepperComponent

Properties

Section titled "Properties"

activeStepChanged

Section titled "activeStepChanged"

Emitted when the active step is changed.

 
activeStepChanged: EventEmitter<IStepChangedEventArgs>

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

Example

<igx-stepper (activeStepChanged)="handleActiveStepChanged($event)"></igx-stepper>

activeStepChanging

Section titled "activeStepChanging"

Emitted when the stepper's active step is changing.

<igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
</igx-stepper>
public handleActiveStepChanging(event: IStepChangingEventArgs) {
 if (event.newIndex < event.oldIndex) {
     event.cancel = true;
 }
}
activeStepChanging: EventEmitter<IStepChangingEventArgs>

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

contentTop

Section titled "contentTop"

Get/Set whether the content is displayed above the steps.

 
contentTop: boolean = false

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

Remarks

Default value is false and the content is below the steps.

this.stepper.contentTop = true;

stepType

Section titled "stepType"

Get/Set the type of the steps.

this.stepper.stepType = IgxStepType.Indicator;
stepType: IgxStepType = IgxStepType.Full

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

titlePosition

Section titled "titlePosition"

Get/Set the position of the steps title.

 
titlePosition: IgxStepperTitlePosition = null

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

Remarks

The default value when the stepper is horizontally orientated is bottom. In vertical layout the default title position is end.

this.stepper.titlePosition = IgxStepperTitlePosition.Top;

animationDuration

Section titled "animationDuration" 
animationDuration: number

Defined in projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:141, projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:145

horizontalAnimationType

Section titled "horizontalAnimationType" 
horizontalAnimationType: HorizontalAnimationType

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

linear

Section titled "linear" 
linear: boolean

Defined in projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:164, projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:168

orientation

Section titled "orientation" 
orientation: IgxStepperOrientation

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

verticalAnimationType

Section titled "verticalAnimationType" 
verticalAnimationType: VerticalAnimationType

Defined in projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:89, projects/igniteui-angular/stepper/src/stepper/stepper.component.ts:93

Accessors

Section titled "Accessors"

steps

Section titled "steps"

Get all steps.

const steps: IgxStepComponent[] = this.stepper.steps;
get steps(): IgxStepComponent[]

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

Returns IgxStepComponent[]

Methods

Section titled "Methods"
Section titled "navigateTo"

Activates the step at a given index.

this.stepper.navigateTo(1);
navigateTo(index: number): void

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

Parameters

  • index: number

Returns void

next

Section titled "next"

Activates the next enabled step.

this.stepper.next();
next(): void

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

Returns void

prev

Section titled "prev"

Activates the previous enabled step.

this.stepper.prev();
prev(): void

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

Returns void

reset

Section titled "reset"

Resets the stepper to its initial state i.e. activates the first step.

reset(): void

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

Returns void