Getting Started with Kendo UI for Angular Drawer

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

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

        my-app {
            display: flex;
            flex-direction: column;
        }

        kendo-drawer-container {
            flex: 1 1 auto;
            overflow-y: auto;
        }
        .k-icon {
            font-size: 20px;
        }
        .custom-toolbar {
            width: 100%;
            background-color: #f6f6f6;
            line-height: 10px;
            border-bottom: inset;
            border-bottom-width: 1px;
            padding: 3px 8px;
            color: #656565;
        }
        .mail-box{
            margin-left: 20px;
            font-weight: bold;
            font-size: 17px;
        }
    `],
    template: `
    <div class="custom-toolbar">
    <button
        kendoButton
        icon="menu"
        look="flat"
        (click)="drawer.toggle()"
    ></button>
    <span class="mail-box">Mail Box</span>
    </div>
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [mode]="'push'"
            [mini]="true"
            [expanded]="true"
            (select)="onSelect($event)">
        </kendo-drawer>

        <kendo-drawer-content>
            <my-content [selectedItem]="selected"></my-content>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `
})
export class AppComponent {
    public selected = 'Inbox';

    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 onSelect(ev: DrawerSelectEvent): void {
        this.selected = ev.item.text;
    }
}

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 { ButtonsModule } from '@progress/kendo-angular-buttons';

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

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        ButtonsModule
    ],
    declarations: [
        AppComponent,
        ContentComponent
    ],
    bootstrap:    [ AppComponent ]
})
export class AppModule {}

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

@Component({
    encapsulation: ViewEncapsulation.None,
    styles: [`
        my-content ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        my-content li {
            font-size: 1.2em;
            background: 0 0;
            border-radius: 0;
            border-width: 0 0 1px;
            border-color: rgba(33, 37, 41, 0.125);
            border-style: solid;
            line-height: 1.5em;
            padding: 1.09em .84em 1.23em .84em;
        }

        my-content li:last-child {
            border: 0;
        }
    `],
    selector: 'my-content',
    template: `
        <div id="Inbox" *ngIf="selectedItem === 'Inbox'">
            <ul class="inboxList">
                <li>
                    <h6>Monday meeting</h6>
                    <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
                </li>
                <li>
                    <h6>I'm sorry, Tom</h6>
                    <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
                </li>
            </ul>
        </div>
        <div id="Notifications" *ngIf="selectedItem === 'Notifications'">
            <ul>
                <li>Monday meeting</li>
                <li>Regarding org chart changes</li>
                <li>Meeting with Cliff</li>
                <li>Global Marketing Meeting</li>
                <li>Out tonight with collegues?</li>
            </ul>
        </div>
        <div id="Calendar" *ngIf="selectedItem === 'Calendar'">
            <ul>
                <li>
                    <h6>11/5 Monday</h6>
                    <p>Martha Birthday</p>
                </li>
                <li>
                    <h6>15/6 Sunday</h6>
                    <p>Job interview for internal position</p>
                </li>
            </ul>
        </div>
        <div id="Attachments" *ngIf="selectedItem === 'Attachments'">
            <ul>
                <li>Build enterprise apps</li>
                <li>Fw: Regarding Multiline textbox</li>
                <li>Away next week</li>
                <li>Fw: Your Costume is ready</li>
                <li>Update completed</li>
            </ul>
        </div>
        <div id="Favourites" *ngIf="selectedItem === 'Favourites'">
            <ul>
                <li>70% Discount!</li>
                <li>90% Discount!</li>
                <li>One time offer!</li>
            </ul>
        </div>
    `
})
export class ContentComponent {
    @Input() selectedItem: string;
}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);