New to Kendo UI for Angular? Start a free 30-day trial

StepperComponent

Component

Represents the Kendo UI Stepper component for Angular.

Definition

Package:@progress/kendo-angular-layout

Selector:kendo-stepper

Export Name:Accessible in templates as #kendoStepperInstance="kendoStepper"

Syntax:

@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' }
  ];
}

Inputs

animation?

number | boolean

Specifies the duration of the progress indicator animation in milliseconds.

Default:

true

currentStep

number

Specifies the index of the current step.

errorIcon

string

Specifies an SVG icon that will be rendered inside the step for invalid previous steps. You can use either an existing Kendo SVG icon or a custom one.

errorSVGIcon

SVGIcon

Specifies an SVG icon to be rendered for the error icon. You can use either an existing Kendo SVG icon or a custom one.

linear

boolean

Specifies the linear flow of the Stepper.

Default:

true

orientation

StepperOrientation

Specifies the orientation of the Stepper (see example).

Default:

'horizontal'

steps

any[]

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

stepType

StepType

Specifies the type of the steps in the Stepper.

Default:

'indicator'

successIcon

string

Specifies an SVG icon that will be rendered inside the step for valid previous steps. You can use either an existing Kendo SVG icon or a custom one.

successSVGIcon

SVGIcon

Specifies an SVG icon to be rendered for the success icon. You can use either an existing Kendo SVG icon or a custom one.

svgIcon

SVGIcon

Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content. You can use either an existing Kendo SVG icon or a custom one.

Events

activate

EventEmitter<StepperActivateEvent>

Fires when a step is about to be activated. You can prevent this event.

currentStepChange

EventEmitter<number>

Fires when the currentStep property of the component was updated. Use this event 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 (see example).

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