Templates

The Drawer allows you to use templates to customize its appearance.

To define a template, nest an <ng-template> tag inside the <kendo-drawer> tag and apply one of the following directives to it:

  • "kendoDrawerItemTemplate"—Specifies the look of the items in the list.
  • "kendoDrawerHeaderTemplate"—Specifies the contents above the rendered items.
  • "kendoDrawerFooterTemplate"—Specifies the contents below the rendered items.
  • "kendoDrawerTemplate"—Completely overrides the contents of the Drawer. Allows full customization of it's appearance.

Item Template

When you bind the Drawer to a collection of items, you can customize the look of its items by using the kendoDrawerItemTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-drawer> tag. The template context is set to the current Drawer item. To get a reference to the current item, use the let-item directive.

import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerSelectEvent } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
    <div class="custom-toolbar">
    <button
        kendoButton
        icon="menu"
        look="flat"
        (click)="drawer.toggle()"
    ></button>
    <span style="margin-left: 20px; font-weight: bold; font-size: 17px;"
        >Weather Forecast in Europe</span
    >
    </div>
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [mode]="'push'"
            [mini]="true"
            [width]="175"
            [(expanded)]="expanded"
            (select)="onSelect($event)"
        >
            <ng-template kendoDrawerItemTemplate let-item>
                <span class="k-icon item-icon flag {{ item.iconFlag }}"></span>
                <div class="item-descr-wrap" *ngIf="expanded">
                    <div>{{ item.title }}</div>
                    <span class="item-descr">{{ item.description }}</span>
                </div>
            </ng-template>
        </kendo-drawer>

        <kendo-drawer-content>
            <span class="weather-icon {{ selected.iconClass }}"></span>
            <span class="weather">
                <h2>{{ selected.temp }}<span>ºC</span></h2>
                <p>Sunny weather in {{ selected.title }}</p>
            </span>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        my-app { padding: 0; }
        kendo-drawer-content { padding: 20px; }
        kendo-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .k-drawer-item { align-items: center; }
        .weather {
            margin: 0 auto 30px;
            text-align: center;
        }
        .weather-icon {
            display: block;
            margin: 30px auto 10px;
            width: 128px;
            height: 128px;
        }
        .k-drawer-item .item-icon {
            height: 35px;
        }
        .custom-toolbar {
            width: 100%;
            background-color: #f6f6f6;
            line-height: 10px;
            border-bottom: inset;
            border-bottom-width: 1px;
            padding: 3px 8px;
            color: #656565;
        }
        .sunny {
            background: url('https://demos.telerik.com/kendo-ui/content/web/tabstrip/weather.png') transparent no-repeat 0 0;
        }
        .cloudy {
            background: url('https://demos.telerik.com/kendo-ui/content/web/tabstrip/weather.png') transparent no-repeat -128px 0;
        }
        .item-descr {
            margin-top: -5px;
        }
        .item-descr-wrap > span {
            font-size: 70%;
        }
        .item-descr-wrap {
            display: flex;
            flex-direction: column;
        }
        .flag {
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-color: transparent;
        }
        .france-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/france-flag.png');
        }
        .spain-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/spain-flag.png');
        }
        .italy-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/italy-flag.png');
        }
        .germany-flag {
            background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/germany-flag.png');
        }
    `]
})
export class AppComponent {
    public expanded = false;

    public selected: any = {
        title: 'Paris',
        description: 'Capital of France',
        iconFlag: 'france-flag',
        temp: 21,
        iconClass: 'sunny',
        selected: true
    };

    public items = [{
        title: 'Paris',
        description: 'Capital of France',
        iconFlag: 'france-flag',
        temp: 21,
        iconClass: 'sunny',
        selected: true
    },
    { separator: true },
    {
        title: 'Rome',
        description: 'Capital of Italy',
        iconFlag: 'italy-flag',
        temp: 30,
        iconClass: 'sunny'
    },
    { separator: true },
    {
        title: 'Berlin',
        description: 'Capital of Germany',
        iconFlag: 'germany-flag',
        temp: 18 ,
        iconClass: 'cloudy'
    },
    { separator: true },
    {
        title: 'Madrid',
        description: 'Capital of Spain',
        iconFlag: 'spain-flag',
        temp: 31,
        iconClass: 'sunny'
    }];

    public onSelect(ev: DrawerSelectEvent): void {
        this.selected = ev.item;
    }
}
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 { AppComponent } from './app.component';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        ButtonsModule
    ],
    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);

You can add custom content above and under the rendered items of the Drawer by using the kendoDrawerHeaderTemplate and the kendoDrawerFooterTemplate.

import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerItem } from '@progress/kendo-angular-layout';

@Component({
    selector: 'my-app',
    template: `
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [mode]="'push'"
            [mini]="true"
            [width]="175"
            [(expanded)]="expanded"
        >
            <ng-template kendoDrawerHeaderTemplate>
                <div *ngIf="expanded" style="text-align: center;">
                    <h4>Mail Box</h4>
                </div>
            </ng-template>
            <ng-template kendoDrawerItemTemplate let-item>
                <span class="k-icon {{ item.icon }}"></span>
                <span *ngIf="expanded">{{ item.text }}</span>
            </ng-template>
            <ng-template kendoDrawerFooterTemplate>
                <div *ngIf="expanded" style="text-align: center;">
                    <button class="k-button" (click)="drawer.toggle()">Collapse</button>
                </div>
            </ng-template>
        </kendo-drawer>

        <kendo-drawer-content>
            <button class="k-button" (click)="drawer.toggle()">Toggle the Drawer</button>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        my-app { padding: 0; }

        kendo-drawer-content { padding: 20px; }

        kendo-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    `]
})
export class AppComponent {
    public expanded = false;

    public items: DrawerItem[] = [
        { text: 'Inbox', icon: 'k-i-inbox' },
        { text: 'Notifications', icon: 'k-i-bell' },
        { text: 'Favourites', icon: 'k-i-star-outline' },
        { text: 'Date', icon: 'k-i-calendar' }
    ];
}
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 { AppComponent } from './app.component';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        ButtonsModule
    ],
    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);

Drawer Template

To display custom content inside the Drawer, utilize the kendoDrawerTemplate directive.

When the kendoDrawerTemplate directive is used, only the contents inside its ng-template element will be displayed. All other template directives will be ignored.

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

@Component({
    selector: 'my-app',
    template: `
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [mode]="'push'"
            [(expanded)]="expanded"
        >
            <ng-template kendoDrawerTemplate>
                <form class="k-form" *ngIf="expanded">
                    <label class="k-form-field">
                        <span>First Name</span>
                        <input class="k-textbox" placeholder="Your Name" />
                    </label>
                    <label class="k-form-field">
                        <span>Last Name</span>
                        <input class="k-textbox" placeholder="Your Last Name" />
                    </label>
                    <label class="k-form-field">
                        <button type="button" class="k-button" (click)="drawer.toggle()">Submit</button>
                    </label>
                </form>
            </ng-template>
        </kendo-drawer>

        <kendo-drawer-content>
            <button class="k-button" (click)="drawer.toggle()">Toggle the Drawer</button>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        my-app { padding: 0; }

        kendo-drawer-content { padding: 20px; }

        kendo-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    `]
})
export class AppComponent {
    public expanded = false;
}
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 { AppComponent } from './app.component';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        ButtonsModule
    ],
    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