Getting Started with Kendo UI for Angular Stepper

The Stepper component visualizes progress by dividing content into logical steps. It enables wizard-like workflow and supports multiple step types, linear flow, step validation, templates and more.

Basic Usage

The following example demonstrates the Stepper in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [steps]="steps"
            [stepType]="'full'"
            [(currentStep)]="current"
            [linear]="false"
            [style.width.px]="570">
        </kendo-stepper>
    `
})
export class AppComponent {
    public current = 1;

    public steps = [
        { label: 'Personal Info', icon: 'user' },
        { label: 'Education', icon: 'dictionary-add' },
        { label: 'Attachments', icon: 'attachment', optional : true },
        { label: 'Preview', icon: 'preview' },
        { label: 'Submit', icon: 'file-add' }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Functionality and Features

In this article