Class IgxStepperComponent

IgxStepper provides a wizard-like workflow by dividing content into logical steps.

Igx Module

IgxStepperModule

Igx Keywords

stepper

Igx Group

Layouts

Remarks

The Ignite UI for Angular Stepper component allows the user to navigate between multiple steps. It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step. The component offers keyboard navigation and API to control the active step.

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>

Hierarchy

IgxCarouselComponentBase
- IgxStepperComponent

Implements

IgxStepper
OnChanges
OnInit
AfterContentInit
OnDestroy

Constructors

Properties

Accessors

Methods

Constructors

constructor

new IgxStepperComponent(cdr, animationService, stepperService, element): IgxStepperComponent
Overrides IgxCarouselComponentBase.constructor
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:335
Parameters
- cdr: ChangeDetectorRef
- animationService: AnimationService
- stepperService: IgxStepperService
- element: ElementRef<HTMLElement>
Returns IgxStepperComponent

Properties

activeStepChanged

activeStepChanged: EventEmitter<IStepChangedEventArgs> = ...

Emitted when the active step is changed.

Example

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

activeStepChanging

activeStepChanging: EventEmitter<IStepChangingEventArgs> = ...

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;
 }
}

contentTop

contentTop: boolean = false

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

Remarks

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

this.stepper.contentTop = true;

stepType

stepType: IgxStepType = IgxStepType.Full

Get/Set the type of the steps.

this.stepper.stepType = IgxStepType.Indicator;

titlePosition

titlePosition: IgxStepperTitlePosition = null

Get/Set the position of the steps title.

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 animationDuration(): number
Implementation of IgxStepper.animationDuration
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:145
Get/Set the animation duration.
```
<igx-stepper [animationDuration]="500">
<igx-stepper>
```
Returns number
set animationDuration(value): void
Implementation of IgxStepper.animationDuration
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:149
Parameters
- value: number
Returns void

horizontalAnimationType

get horizontalAnimationType(): HorizontalAnimationType
Implementation of IgxStepper.horizontalAnimationType
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:127
Get/Set the animation type of the stepper when the orientation direction is horizontal.
Remarks
Default value is grow. Other possible values are fade and none.
```
<igx-stepper animationType="none">
<igx-stepper>
```
Returns HorizontalAnimationType
set horizontalAnimationType(value): void
Implementation of IgxStepper.horizontalAnimationType
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:131
Parameters
- value: HorizontalAnimationType
Returns void

linear

get linear(): boolean
Implementation of IgxStepper.linear
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:168
Get/Set whether the stepper is linear.
Remarks
If the stepper is in linear mode and if the active step is valid only then the user is able to move forward.
```
<igx-stepper [linear]="true"></igx-stepper>
```
Returns boolean
set linear(value): void
Implementation of IgxStepper.linear
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:172
Parameters
- value: boolean
Returns void

orientation

get orientation(): IgxStepperOrientation
Implementation of IgxStepper.orientation
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:193
Get/Set the stepper orientation.
```
this.stepper.orientation = IgxStepperOrientation.Vertical;
```
Returns IgxStepperOrientation
set orientation(value): void
Implementation of IgxStepper.orientation
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:197
Parameters
- value: IgxStepperOrientation
Returns void

steps

get steps(): IgxStepComponent[]
Implementation of IgxStepper.steps
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:313
Get all steps.
```
const steps: IgxStepComponent[] = this.stepper.steps;
```
Returns IgxStepComponent[]

verticalAnimationType

get verticalAnimationType(): VerticalAnimationType
Implementation of IgxStepper.verticalAnimationType
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:93
Get/Set the animation type of the stepper when the orientation direction is vertical.
Remarks
Default value is grow. Other possible values are fade and none.
```
<igx-stepper verticalAnimationType="none">
<igx-stepper>
```
Returns VerticalAnimationType
set verticalAnimationType(value): void
Implementation of IgxStepper.verticalAnimationType
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:97
Parameters
- value: VerticalAnimationType
Returns void

Methods

navigateTo

navigateTo(index): void
Implementation of IgxStepper.navigateTo
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:401
Activates the step at a given index.
```
this.stepper.navigateTo(1);
```
Parameters
- index: number
Returns void

next(): void
Implementation of IgxStepper.next
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:416
Activates the next enabled step.
```
this.stepper.next();
```
Returns void

prev(): void
Implementation of IgxStepper.prev
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:427
Activates the previous enabled step.
```
this.stepper.prev();
```
Returns void

reset

reset(): void
Implementation of IgxStepper.reset
- Defined in projects/igniteui-angular/src/lib/stepper/stepper.component.ts:440
Resets the stepper to its initial state i.e. activates the first step.
Remarks
The steps' content will not be automatically reset.
```
this.stepper.reset();
```
Returns void

Class IgxStepperComponent

Igx Module

Igx Keywords

Igx Group

Remarks

Example

Hierarchy

Hierarchy

Implements

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

cdr: ChangeDetectorRef

animationService: AnimationService

stepperService: IgxStepperService

element: ElementRef<HTMLElement>

Returns IgxStepperComponent

Properties

activeStepChanged

Example

activeStepChanging

contentTop

Remarks

stepType

titlePosition

Remarks

Accessors

animationDuration

Returns number

Parameters

value: number

Returns void

horizontalAnimationType

Remarks

Returns HorizontalAnimationType

Parameters

value: HorizontalAnimationType

Returns void

linear

Remarks

Returns boolean

Parameters

value: boolean

Returns void

orientation

Returns IgxStepperOrientation

Parameters

value: IgxStepperOrientation

Returns void

steps

Returns IgxStepComponent[]

verticalAnimationType

Remarks

Returns VerticalAnimationType

Parameters

value: VerticalAnimationType

Returns void

Methods

navigateTo

Parameters

index: number

Returns void

next

Returns void

prev

Returns void

reset

Remarks

Returns void