Getting Started with Kendo UI for Angular AppBar

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-appbar [position]="'top'">
            <kendo-appbar-section>
                <button class="k-button k-button-clear">
                    <kendo-icon [name]="'menu'"></kendo-icon>
                </button>
            </kendo-appbar-section>

            <kendo-appbar-section>
                <h1 class="title">Kendo UI for Angular</h1>
            </kendo-appbar-section>

            <kendo-appbar-spacer [width]="'32px'"></kendo-appbar-spacer>

            <kendo-appbar-section>
                <ul>
                    <li><span>What's New</span></li>
                    <li><span>About</span></li>
                    <li><span>Contacts</span></li>
                </ul>
            </kendo-appbar-section>

            <kendo-appbar-spacer></kendo-appbar-spacer>

            <kendo-appbar-section class="actions">
                <kendo-badge-container>
                    <button class="k-button k-button-clear">
                        <kendo-icon [name]="'bell'"></kendo-icon>
                    </button>
                    <kendo-badge [shape]="'dot'" [themeColor]="'warning'" [size]="'small'" [position]="'inside'"></kendo-badge>
                </kendo-badge-container>
                <span class="k-appbar-separator"></span>
            </kendo-appbar-section>

            <kendo-appbar-section>
                <kendo-avatar [imageSrc]="kendokaAvatar" [shape]="'circle'" [width]="'26px'" [height]="'26px'"></kendo-avatar>
            </kendo-appbar-section>
        </kendo-appbar>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        body {
            background: #adadb1;
        }
        .title {
            font-size: 18px;
            margin: 0;
        }
        kendo-badge-container {
            margin-right: 8px;
        }
        ul {
            font-size: 14px;
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        li {
            margin: 0 9px;
        }
        li:hover {
            cursor: pointer;
            color: #D6002F;
        }
        .actions .k-button {
            padding: 0;
        }
    `]
})
export class AppComponent {
    public kendokaAvatar = 'https://www.telerik.com/kendo-angular-ui-develop/components/navigation/appbar/assets/kendoka-angular.png';
}

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 { IndicatorsModule } from '@progress/kendo-angular-indicators';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { IconsModule } from '@progress/kendo-angular-icons';
import { NavigationModule } from '@progress/kendo-angular-navigation';

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        IndicatorsModule,
        IconsModule,
        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);