Step Types

The Stepper component allows you to speficy the type of the rendered steps. It can display each step as a circle indicator, a text label or a combination of both.

To change the type of the steps, use the stepType option. The following step types are supported:

  • indicator (Default)—A circle indicator with customizable content (numeric, text, icon etc) will be rendered for each step.
  • label—No indicator is visible. A text label will be rendered for each step instead.
  • full—The step will consist of a circle indicator and a text label underneath.

The following example demonstrates all step types in action.

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

@Component({
    selector: 'my-app',
    template: `
         <div class="example-config" style="margin-bottom: 20px;">
            <div style="margin-bottom: 10px;">
                <kendo-label style="margin-right: 10px;"
                    [for]="stepTypeDropdown"
                    text="Step type"
                ></kendo-label>
                <kendo-dropdownlist
                    #stepTypeDropdown
                    [style.width.px]="100"
                    [data]="stepTypes"
                    [(ngModel)]="stepType">
                </kendo-dropdownlist>
            </div>
            <div>
                <span style="margin-right: 10px;">Step controls</span>
                <button kendoButton (click)="prev()" style="margin-right: 10px;">Previous step</button>
                <button kendoButton (click)="next()">Next step</button>
            </div>
        </div>

        <kendo-stepper
            [steps]="steps"
            [stepType]="stepType"
            [(currentStep)]="current"
            [style.width.px]="570">
        </kendo-stepper>
    `
})
export class AppComponent {
    public stepType = 'indicator';
    public stepTypes: Array<string> = ['indicator', 'label', 'full'];
    public current = 1;

    public steps = [
        { label: 'First step', isValid: true },
        { label: 'Second step', isValid: false },
        { label: 'Third step', isValid: true, optional: true },
        { label: 'Fourth step', isValid: true }
    ];

    public prev() {
        if (this.current > 0) {
            this.current -= 1;
        }
    }

    public next() {
        if (this.current < this.steps.length - 1) {
            this.current += 1;
        }
    }
}
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);

In this article