Step Appearance

The Stepper component provides the following options for customizing the appearance of the steps:

Indicator Icon

The Stepper enables you to display icons inside the step indicators. Those could be either existing icons in a Kendo UI theme or custom ones.

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

@Component({
    selector: 'my-app',
    template: `
        <h5 style="margin-bottom: 20px;">Kendo UI Icons</h5>
        <kendo-stepper
            [steps]="steps"
            [linear]="false"
            [stepType]="'full'"
            [style.width.px]="500"
            [style.marginBottom.px]="50">
        </kendo-stepper>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <h5 style="margin-bottom: 20px;">Custom Icons</h5>
        <kendo-stepper
            [style.width.px]="500"
            [steps]="stepsCustomIcons"
            [linear]="false"
            [stepType]="'full'">
        </kendo-stepper>
    `
})
export class AppComponent {
    public steps = [
        { label: 'Personal Info', icon: 'user' },
        { label: 'Education', icon: 'dictionary-add' },
        { label: 'Experience', icon: 'flip-vertical' },
        { label: 'Attachments', icon: 'attachment' }
    ];

    public stepsCustomIcons = [
        { label: 'Personal Info', iconClass: 'fa fa-users fa-fw' },
        { label: 'Education', iconClass: 'fa fa-wikipedia-w fa-fw' },
        { label: 'Experience', iconClass: 'fa fa-book fa-fw' },
        { label: 'Attachments', iconClass: 'fa fa-upload fa-fw' }
    ];
}
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 { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { FormsModule } from '@angular/forms';
import { LabelModule } from '@progress/kendo-angular-label';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        DropDownsModule,
        FormsModule,
        LabelModule,
        ButtonsModule
    ],
    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);

Indicator Text

The Stepper allows displaying custom text content inside the step indicators instead of the default numeric one

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [style.width.px]="150"
            [steps]="steps">
        </kendo-stepper>
    `
})
export class AppComponent {
    public steps = [
        { label: 'First step', text: 'A' },
        { label: 'Second step', text: 'B' },
        { label: 'Third step', text: 'C' }
    ];
}
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 { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { FormsModule } from '@angular/forms';
import { LabelModule } from '@progress/kendo-angular-label';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        DropDownsModule,
        FormsModule,
        LabelModule,
        ButtonsModule
    ],
    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);

Current Step

The current step of the Stepper is specified by using the currentStep option. The property supports two-way binding which is provided by the currentStepChange event.

When the user navigates to a step and activates it (either by mouse click or via keyboard), the Stepper emits a preventable activate event. If prevented, the currentStep will remain unchanged.

import { Component } from '@angular/core';
import { StepperActivateEvent } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
        <h5 style="margin-bottom: 20px;">The activation of the last step is prevented</h5>
        <kendo-stepper
            [steps]="steps"
            [stepType]="'full'"
            [(currentStep)]="currentStep"
            (activate)="onStepActivate($event)"
            [linear]="false"
            [style.width.px]="500">
        </kendo-stepper>
    `
})
export class AppComponent {
    public currentStep = 1;

    public steps = [
        { label: 'Personal Info', icon: 'user' },
        { label: 'Education', icon: 'dictionary-add' },
        { label: 'Experience', icon: 'flip-vertical' },
        { label: 'Attachments', icon: 'attachment' }
    ];

    public onStepActivate(ev: StepperActivateEvent): void {
        if (ev.index === this.steps.length - 1) {
            ev.preventDefault();

            alert('Please fill previous steps');
        }

        console.log(`Step ${ev.index} was activated`);
    }
}
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 { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { FormsModule } from '@angular/forms';
import { LabelModule } from '@progress/kendo-angular-label';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        DropDownsModule,
        FormsModule,
        LabelModule,
        ButtonsModule
    ],
    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);

Optional Step

A step could be marked as optional by using the optional property. If set to true, the step will have an Optional label rendered under its indicator.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [style.width.px]="350"
            [steps]="steps"
            [stepType]="'full'"
            [linear]="false">
        </kendo-stepper>
    `
})
export class AppComponent {
    public steps = [
        { label: 'First step' },
        { label: 'Second step', optional: true },
        { label: 'Third step' }
    ];
}
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 { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { FormsModule } from '@angular/forms';
import { LabelModule } from '@progress/kendo-angular-label';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        DropDownsModule,
        FormsModule,
        LabelModule,
        ButtonsModule
    ],
    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);

Disabled Step

A step could be marked as disabled by using the disabled property. Disabled steps can be focused through keyboard navigation, but they cannot be activated.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [style.width.px]="350"
            [stepType]="'full'"
            [steps]="steps"
            [linear]="false">
        </kendo-stepper>
    `
})
export class AppComponent {
    public steps = [
        { label: 'First step' },
        { label: 'Second step', disabled: true },
        { label: 'Third step' }
    ];
}
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 { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { FormsModule } from '@angular/forms';
import { LabelModule } from '@progress/kendo-angular-label';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        DropDownsModule,
        FormsModule,
        LabelModule,
        ButtonsModule
    ],
    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);

Templated Step

For more information about step templates, please check the Templates section of the documentation.

In this article