StepperComponent

Represents the Kendo UI Stepper component for Angular.

@Component({
   selector: 'my-app',
   template: `
       <kendo-stepper [steps]="steps">
       </kendo-stepper>
   `
})
class AppComponent {
   public steps: Array<StepperStep> = [
     { label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
   ];
}

Selector

kendo-stepper

Export Name

Accessible in templates as #kendoStepperInstance="kendoStepper"

Inputs

animation? boolean | number

Specifies the duration of the progress indicator animation in milliseconds. Defaults to 400ms.

The possible values are:

• Boolean
  • (Default) true
  • false
• Number

errorIcon string

Specifies a custom icon that will be rendered inside the step
for invalid previous steps.

linear boolean (default: true)

Specifies the linear flow of the Stepper.

orientation StepperOrientation

Specifies the orientation of the Stepper
(see example).

The possible values are:

• (Default) horizontal
• vertical

stepType StepType

Specifies the type of the steps in the Stepper.

The possible values are:

• (Default) indicator
• label
• full

successIcon string

Specifies a custom icon that will be rendered inside the step
for valid previous steps.

currentStep number

The index of the current step.

steps any[]

The collection of steps that will be rendered in the Stepper.
(see example)

Events

activate EventEmitter<StepperActivateEvent>

Fires when a step is about to be activated. This event is preventable.

currentStepChange EventEmitter<number>

Fires when the currentStep property of the component was updated.
Used to provide a two-way binding for the currentStep property.

Methods

validateSteps

Manually triggers the validity check configured by the isValid property of the steps.

Steps that have their validate property set to false, will not be validated.