Getting Started with Kendo UI for Angular AppBar

The AppBar provides information and actions related to the current application screen. It is typically used to show page titles, brand identity and can contain navigation items.

Basic Usage

The following example demonstrates the AppBar in action.

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

Functionality and Features

In this article