• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBoxupdated
    • ListView
    • Map
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PDFViewernew
    • PivotGrid
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeListupdated
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesupdated
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Layout / API / StepperComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

animation?

number | boolean

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

The possible values are:

  • Boolean
    • (Default) true
    • false
  • Number

currentStep

number

The index of the current step.

errorIcon

string

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

errorSVGIcon

SVGIcon

Defines an SVGIcon to be rendered for the error icon. The input can take either an existing Kendo SVG icon or a custom one.

linear

boolean

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

steps

any[]

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

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.

successSVGIcon

SVGIcon

Defines an SVGIcon to be rendered for the success icon. The input can take either an existing Kendo SVG icon or a custom one.

svgIcon

SVGIcon

Defines an SVG icon to be rendered inside the step indicator instead of the default numeric or text content. The input can take either an existing Kendo SVG icon or a custom one.

Events

NameTypeDescription

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 (see example).

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

In this article

Not finding the help you need?

Contact Support