Positioning

The Drawer enables you to specify its position in relation to the page content.

To specify the side of the content to which the Drawer will be displayed, use the position property.

The Drawer provides the following options for positioning:

  • start—Positions the Drawer to the left of the content.
  • end—Positions the Drawer to the right of the content.
import { Component, ViewEncapsulation } from '@angular/core';
import { DrawerItem, DrawerPosition } from '@progress/kendo-angular-layout';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'my-app',
    styles: [`
        my-app {
            padding: 0;
        }

        kendo-drawer-container {
            position: fixed;
            width: 100%;
            height: 100%;
        }
    `],
    template: `
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [mode]="'push'"
            [position]="position"
            [expanded]="true">
        </kendo-drawer>

        <kendo-drawer-content>
            <div class="k-form">
                <div class="k-form-field">
                    <button class="k-button" (click)="drawer.toggle()">Toggle the Drawer</button>
                </div>
                <div class="k-form-field">
                    <label for="expandSwitch">Switch Drawer position</label>
                    <kendo-switch
                        id="expandSwitch"
                        checked="true"
                        [onLabel]="' '"
                        [offLabel]="' '"
                        (valueChange)="onPositionChange($event)">
                    </kendo-switch>
                </div>
                <div class="k-form-field">
                    <p>Current drawer position is <b>{{ position }}</b></p>
                </div>
            </div>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `
})
export class AppComponent {
    public position: DrawerPosition = 'start';

    public items: Array<DrawerItem> = [
        { text: 'Inbox', icon: 'k-i-inbox', selected: true },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell' },
        { text: 'Calendar', icon: 'k-i-calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email' },
        { text: 'Favourites', icon: 'k-i-star-outline' }
    ];

    public onPositionChange(checked: boolean): void {
        this.position = checked ? 'start' : 'end';
    }
}
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 { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        InputsModule
    ],
    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