IgxStepperComponent

Stepper 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

new IgxStepperComponent(): IgxStepperComponent

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

Returns IgxStepperComponent

Properties

activeStepChanged

Emitted when the active step is changed.

activeStepChanged: EventEmitter<IStepChangedEventArgs>

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

Example

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

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

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

Remarks

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

this.stepper.contentTop = true;

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

titlePosition

Get/Set the position of the steps title.

titlePosition: IgxStepperTitlePosition = null

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

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;

Accessors

animationDuration

Get/Set the animation duration.

<igx-stepper [animationDuration]="500">
<igx-stepper>

get animationDuration(): number

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

Returns number

set animationDuration(value: number): void

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

Parameters

value: number

Returns void

horizontalAnimationType

Get/Set the animation type of the stepper when the orientation direction is horizontal.

get horizontalAnimationType(): HorizontalAnimationType

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

Returns HorizontalAnimationType

set horizontalAnimationType(value: HorizontalAnimationType): void

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

Parameters

value: HorizontalAnimationType

Returns void

linear

Get/Set whether the stepper is linear.

get linear(): boolean

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

Returns boolean

set linear(value: boolean): void

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

Parameters

value: boolean

Returns void

orientation

Get/Set the stepper orientation.

this.stepper.orientation = IgxStepperOrientation.Vertical;

get orientation(): IgxStepperOrientation

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

Returns IgxStepperOrientation

set orientation(value: IgxStepperOrientation): void

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

Parameters

value: IgxStepperOrientation

Returns void

steps

Get all steps.

const steps: IgxStepComponent[] = this.stepper.steps;

get steps(): IgxStepComponent[]

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

Returns IgxStepComponent[]

verticalAnimationType

Get/Set the animation type of the stepper when the orientation direction is vertical.

get verticalAnimationType(): VerticalAnimationType

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

Returns VerticalAnimationType

set verticalAnimationType(value: VerticalAnimationType): void

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

Parameters

value: VerticalAnimationType

Returns void

Methods

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

Parameters

index: number

Returns void

Activates the next enabled step.

this.stepper.next();

next(): void

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

Returns void

Activates the previous enabled step.

this.stepper.prev();

prev(): void

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

Returns void

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