Linear Flow

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);