Linear Flow

By default, the Stepper component forces the linear flow of the steps. This means that the user will be able to access only the next and previous step. To disable this behavior, use the linear option and set it to false.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper" style="margin-bottom: 20px;">
          <input class="k-checkbox" type="checkbox" id="linear" [(ngModel)]="isLinear" />
          <label class="k-checkbox-label" [attr.for]="'linear'">Toggle the linear flow of the Stepper</label>
        </div>

        <kendo-stepper
            [steps]="steps"
            [stepType]="'full'"
            [currentStep]="1"
            [linear]="isLinear"
            [style.width.px]="570">
        </kendo-stepper>
    `
})
export class AppComponent {
    public isLinear = true;

    public steps = [
        { label: 'Step One' },
        { label: 'Step Two' },
        { label: 'Step Three', optional: true },
        { label: 'Step Four' },
        { label: 'Step Five' }
    ];
}
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,
        FormsModule,
        LabelModule
    ],
    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