Interaction Modes

The Drawer enables you to set its initial expanded state and change it on demand by using the available API options.

Setting the Initial State

To specify the initial state of display for the Drawer, use its expanded Boolean property. By default, expanded is set to false. The property supports two-way binding and can be programmatically updated to immediately expand or collapse the Drawer.

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'"
            [(expanded)]="expanded">
        </kendo-drawer>

        <kendo-drawer-content>
            <button class="k-button" (click)="switchExpanded()">Switch the Drawer state</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 = true;

    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' }
    ];

    public switchExpanded(): void {
        this.expanded = !this.expanded;
    }
}
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);

Toggling between States

The Drawer also exposes a toggle method that can be used for expanding and collapsing the component. The difference of this suggested approach from the approach for setting the initial expanded state state is that the toggle method will trigger the animation which is specified in the configuration options of the Drawer.

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'">
        </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 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);

In this article