Getting Started with Kendo UI for Angular Breadcrumb

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

import { BreadCrumbItem } from '@progress/kendo-angular-navigation';

const defaultItems: BreadCrumbItem[] = [
    {
        text: 'Home',
        title: 'Home',
        icon: 'home'
    },
    {
        text: 'Products',
        title: 'Products'
    },
    {
        text: 'Computer peripherals',
        title: 'Computer peripherals'
    },
    {
        text: 'Keyboards',
        title: 'Keyboards'
    },
    {
        text: 'Gaming keyboards',
        title: 'Gaming keyboards'
    }
];

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton [icon]="'refresh'" (click)="refreshBreadCrumb()">Refresh breadcrumb</button>
        <kendo-breadcrumb [items]="items" (itemClick)="onItemClick($event)"></kendo-breadcrumb>
    `,
    styles: [
        `
            kendo-breadcrumb {
                margin-top: 20px;
            }
        `
    ]
})
export class AppComponent {
    public items: BreadCrumbItem[] = [...defaultItems];

    public onItemClick(item: BreadCrumbItem): void {
        const index = this.items.findIndex(e => e.text === item.text);
        this.items = this.items.slice(0, index + 1);
    }

    public refreshBreadCrumb(): void {
        this.items = [...defaultItems];
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavigationModule } from '@progress/kendo-angular-navigation';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        ButtonsModule,
        DropDownsModule,
        InputsModule,
        NavigationModule
    ],
    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);