Templates

The Stepper allows you to use templates to customize the appearance of its steps.

To define a template, nest an <ng-template> tag inside the <kendo-stepper> tag and apply one of the following directives to it:

  • "kendoStepperIndicatorTemplate"—Specifies the content of the step indicator.
  • "kendoStepperLabelTemplate"—Specifies the content of the step label.
  • "kendoStepperStepTemplate"— Completely overrides the content of the step. Allows full customizaton of the step appearance.

Indicator Template

You can customize the look of the step indicator by using the kendoStepperIndicatorTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-stepper> tag. The template context is set to the current step. To get a reference to the current step, use the let-step directive. The index of the current step is also available in the template through the index field.

Note that the step indicators are rendered when the stepType property is set to indicator or full.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [steps]="steps"
            [stepType]="'full'"
            [currentStep]="2"
            [linear]="false"
            [style.width.px]="570"
        >
            <ng-template kendoStepperIndicatorTemplate let-step>
                <span class="emoji">{{step.emoji}}</span>
            </ng-template>
        </kendo-stepper>
    `,
    styles: [`
        .emoji {
            height: 100%;
            line-height: 28px;
            display: inline-block;
        }
    `],
})
export class AppComponent {
    public steps = [
        { label: 'Happy', emoji: '😀' },
        { label: 'Angry', emoji: '😠' },
        { label: 'Cool', emoji: '😎' },
        { label: 'Love', emoji: '😍' },
        { label: 'Fear', emoji: '😨' }
    ];
}
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);

Label Template

When the stepType property is set to label or full, a label will be rendered for each step. You can customize the look of the step labels by using the kendoStepperLabelTemplate.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [steps]="steps"
            [stepType]="'label'"
            [currentStep]="2"
            [linear]="false"
            [style.width.px]="610"
        >
            <ng-template kendoStepperLabelTemplate let-step>
                <span>{{step.label}}</span>
                <span class="{{step.icon}}"></span>
            </ng-template>
        </kendo-stepper>
    `
})
export class AppComponent {
    public steps = [
        { label: 'Word', icon: 'k-icon k-i-file-word' },
        { label: 'Excel', icon: 'k-icon k-i-file-excel' },
        { label: 'Powerpoint', icon: 'k-icon k-i-file-ppt' },
        { label: 'Psd', icon: 'k-icon k-i-file-psd' },
        { label: 'Pdf', icon: 'k-icon k-i-file-pdf' }
    ];
}
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);

Step Template

To display custom content and override the appearance of the whole step, utilize the kendoStepperStepTemplate.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-stepper
            [steps]="steps"
            [stepType]="'label'"
            [currentStep]="2"
            [linear]="false"
            [style.width.px]="500"
        >
            <ng-template kendoStepperStepTemplate let-step>
                <div class='custom-step'>
                    <span class="{{step.icon}}"></span>
                </div>
                <span class='step-label'>{{step.label}}</span>
            </ng-template>
        </kendo-stepper>
    `,
    styles: [`
        .k-stepper > .k-progressbar {
            height: 4px;
            top: 18px;
        }

        .k-stepper > .k-progressbar .k-state-selected {
            background: linear-gradient(to right, #ffc837, #ff8008);
        }

        .custom-step {
            width: 40px;
            height: 40px;
            border: 2px solid #ff8008;
            border-radius: 10px;
            background-clip: padding-box;
            border-radius: 10px;
            box-sizing: border-box;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
        }

        .k-step-done .custom-step {
            background-image: radial-gradient(circle at center, #ffC837 10px, #ff8008);
        }

        .k-step:not(.k-step-done):not(.k-step-current) .custom-step {
            border: 2px solid #ccc;
        }

        .k-step-link .k-icon {
            font-size: 24px;
            color: #000;
        }

        .k-step-link .step-label {
            color: #75240d;
            font-weight: bold;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public steps = [
        { label: 'Configuration', icon: 'k-icon k-i-gear' },
        { label: 'Sizing', icon: 'k-icon k-i-pan' },
        { label: 'Preview', icon: 'k-icon k-i-preview' },
        { label: 'Submit', icon: 'k-icon k-i-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);

In this article