Routing

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

@Component({
    selector: 'my-app',
    template: `
    <div class='demo-header'>
        <button kendoButton icon="menu" look="flat" styles="font-size: 24px;" (click)="drawer.toggle()"></button>
    </div>
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [width]="100"
            [mode]="'push'"
            [(expanded)]="expanded"
        >
            <ng-template kendoDrawerItemTemplate let-item>
                <div class="k-drawer-link" [routerLink]="item.path">
                    <span>{{ item.text }}</span>
                </div>
            </ng-template>
        </kendo-drawer>

        <kendo-drawer-content>
            <router-outlet></router-outlet>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        my-app { padding: 0 }

        .demo-header { padding: 5px; }

        kendo-drawer-content {
            height: 500px;
            overflow: auto;
            padding-left: 10px;
        }
    `]
})
export class AppComponent {
    public expanded = false;
    public items: Array<any> = [];

    constructor(private router: Router) {
        const routes: any[] = router.config;

        routes.forEach(route => {
            this.items.push({
                text: route.text,
                path: route.path ? route.path : ''
            });
        });

        this.items[0].selected = true;
    }
}

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

@Component({
    selector: 'home-component',
    template: `
        <div>
            <h2>Home page</h2>
            <div>
                <p>
                    However engaging wherever growled much methodic shamefully more human agreeable gracefully and less equitable
                    insistent gasped that when wasp baboon rebuilt more slept stingily along knew llama.
                </p>
                <p>
                    Prim crud far healthy wholesomely more far chortled ouch in adroitly gawked affably reasonably manfully reindeer
                    mysteriously overpaid considering far far until.
                </p>
                <p>
                    Red-handed off thickly save aboard mawkishly that amidst moth pending jerkily monogamous some much or creatively
                    indecent neat far jeepers up spoiled about.
                </p>
                <p>
                    Owing desperate like one shark or bit yikes up so thus grumbled gosh more bawled much and regardless hey far bought
                    through crud well staunchly hysteric inside incorrect the closed.
                </p>
                <p>
                    Industrious jubilant blanched bestially yet that less far far a wow the militant preparatory crudely acrimonious under
                    a towards lemur wedded that while decorously this peered darn a much.
                </p>
                <p>
                    Dizzy boundless hence but because moodily and alas a truculently less hardheaded so on ambiguously incompetently less
                    moaned hilarious until one jeepers amid heinously.
                </p>
                <p>
                    Where beneath less misspelled across artistically spiteful jeepers much more that when blushed a much a this groundhog
                    therefore far arduous dependent much satanic where dear goodness hummingbird.
                </p>
            </div>
        </div>
    `
})
export default class HomeComponent {
}

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

@Component({
    selector: 'products-component',
    template: `
    <div>
        <h2>Products</h2>
        <div>
            <p>
                Inclusive and foolishly more on yikes far one vociferous squinted lied much the howled disagreed yet seal needlessly
                vulgarly far moistly wanton.
            </p>
            <p>
                Human and some barring roadrunner behind swore hello ebulliently pending less upon amiable less amiably dear harsh
                telepathic regarding hey poignant ahead.
            </p>
            <p>
                Immensely a that gosh accurately by naughtily patted laxly far pangolin ouch this like marvelous bitter crab jeez
                after unobtrusive flamboyant octopus.
            </p>
            <p>
                So koala that ouch and much porpoise falcon from and wasp curtly crud much more frequently and accidental beneath
                during far.
            </p>
        </div>
    </div>
    `
})
export default class ProductsComponent {
}

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

@Component({
    selector: 'about-component',
    template: `
    <div>
        <h3>
            About
        </h3>
        <div>
            <p>
                So cuffed therefore by some sadistically mallard rewrote yet accommodatingly more cat adequate pesky far this dear
                fitting and groundhog horse some selfish jeepers juggled about since upheld heatedly well much.
            </p>
            <p>
                Therefore falcon usefully crab during onto hello regally rat wiped misread reluctant unlike iguanodon fish far bald
                abjectly far chameleon more scurrilous gagged virtuously sufficient arrogant cobra froze dog waywardly staunch thus
                consoled.
            </p>
            <p>
                Amphibious darn well densely far meanly inanimately incoherent away flamingo outside yet jeez that yawned secret
                evasive dear overrode rat cow one overpaid far hatchet much.
            </p>
            <p>
                Had aerial well well coasted darn chuckled studied underlay fatally the but among because patient or shook depending
                much sloth wetted cheered some bee.
            </p>
            <p>
                Bombastically yikes some coquettish erroneously in therefore disgracefully glanced some connected and goodness more
                read marvelous up one rebukingly darn fuzzily.
            </p>
            <p>
                Meadowlark and hence regarding flaunting amongst steadfastly demurely like far and stiffly bled reluctant alongside
                jeez this save opposite well and this shuddered and smoked wherever condescendingly hey onto much.
            </p>
            <p>
                Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and ouch inside fatuous suitably far fuzzily
                unihibitedly locked froze timidly hello much revealed lorikeet lantern this much one and far decidedly.
            </p>
            <p>
                Crud thanks rethought one correctly friskily slid innocuously ferociously wow by dear and unbound soothing
                unscrupulously one barring inset cassowary that some beaver sheep a unfittingly thus that sighed gosh or but
                far warthog in.
            </p>
            <p>
                Cassowary oh that inventoried followed one convulsive unbridled python more ouch more gosh including plain
                as compositely less mammoth irksome stared oversold so when fled scallop oh buffalo far indelicate
                affirmatively hung gazelle.
            </p>
            <p>
                Roadrunner on hence until up darn tranquilly furrowed far darn circa less far far dear this some amid austere
                aboard a infallibly due a fuzzily far wallaby jeepers.
            </p>
            <p>
                Roadrunner far far withdrew this haltered inside immodest earthworm because towards into hello more that along
                yellow and watchfully darn a.
            </p>
        </div>
    </div>
    `
})

export default class AboutComponent {
}

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
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 HomeComponent from './home.component';
import ProductsComponent from './products.component';
import AboutComponent from './about.component';


const drawerRoutes = [
  { path: '', component: HomeComponent, text: 'Home', icon: 'k-i-globe-outline' },
  { path: 'products', component: ProductsComponent, text: 'Products', icon: 'k-i-cloud' },
  { path: 'about', component: AboutComponent, text: 'About', icon: 'k-i-question' }
];

@NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      ProductsComponent,
      AboutComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      LayoutModule,
      ButtonsModule,
      RouterModule.forRoot(drawerRoutes)
    ],
    providers: [
      {
        provide: APP_BASE_HREF,
        useValue: window.location.pathname
      }
    ],
    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);

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

@Component({
    selector: 'my-app',
    template: `
    <div>
        <button kendoButton icon="menu" look="flat" styles="font-size: 18px;" (click)="drawer.toggle()"></button>
    </div>
    <kendo-drawer-container>
        <kendo-drawer #drawer
            [items]="items"
            [mini]="true"
            [mode]="'push'"
            [(expanded)]="expanded"
            (select)="onSelect($event)">
        </kendo-drawer>

        <kendo-drawer-content>
            <router-outlet></router-outlet>
        </kendo-drawer-content>
    </kendo-drawer-container>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        kendo-drawer-content {
            height: 500px;
            overflow: auto;
            padding-left: 10px;
        }
    `]
})
export class AppComponent {
    public expanded = true;
    public items: Array<any> = [];

    constructor(private router: Router) {
        this.items = this.mapItems(router.config);
        this.items[0].selected = true;
    }

    public onSelect(ev: DrawerSelectEvent): void {
        this.router.navigate([ ev.item.path ]);
    }

    public mapItems(routes: any[], path?: string): any[] {
        return routes.map(item => {
            return {
                text: item.text,
                icon: item.icon,
                path: item.path ? item.path : ''
            };
        });
    }
}

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

@Component({
    selector: 'home-component',
    template: `
        <div>
            <h2>Home page</h2>
            <div>
                <p>
                    However engaging wherever growled much methodic shamefully more human agreeable gracefully and less equitable
                    insistent gasped that when wasp baboon rebuilt more slept stingily along knew llama.
                </p>
                <p>
                    Prim crud far healthy wholesomely more far chortled ouch in adroitly gawked affably reasonably manfully reindeer
                    mysteriously overpaid considering far far until.
                </p>
                <p>
                    Red-handed off thickly save aboard mawkishly that amidst moth pending jerkily monogamous some much or creatively
                    indecent neat far jeepers up spoiled about.
                </p>
                <p>
                    Owing desperate like one shark or bit yikes up so thus grumbled gosh more bawled much and regardless hey far bought
                    through crud well staunchly hysteric inside incorrect the closed.
                </p>
                <p>
                    Industrious jubilant blanched bestially yet that less far far a wow the militant preparatory crudely acrimonious under
                    a towards lemur wedded that while decorously this peered darn a much.
                </p>
                <p>
                    Dizzy boundless hence but because moodily and alas a truculently less hardheaded so on ambiguously incompetently less
                    moaned hilarious until one jeepers amid heinously.
                </p>
                <p>
                    Where beneath less misspelled across artistically spiteful jeepers much more that when blushed a much a this groundhog
                    therefore far arduous dependent much satanic where dear goodness hummingbird.
                </p>
            </div>
        </div>
    `
})
export default class HomeComponent {
}

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

@Component({
    selector: 'products-component',
    template: `
    <div>
        <h2>Products</h2>
        <div>
            <p>
                Inclusive and foolishly more on yikes far one vociferous squinted lied much the howled disagreed yet seal needlessly
                vulgarly far moistly wanton.
            </p>
            <p>
                Human and some barring roadrunner behind swore hello ebulliently pending less upon amiable less amiably dear harsh
                telepathic regarding hey poignant ahead.
            </p>
            <p>
                Immensely a that gosh accurately by naughtily patted laxly far pangolin ouch this like marvelous bitter crab jeez
                after unobtrusive flamboyant octopus.
            </p>
            <p>
                So koala that ouch and much porpoise falcon from and wasp curtly crud much more frequently and accidental beneath
                during far.
            </p>
        </div>
    </div>
    `
})
export default class ProductsComponent {
}

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

@Component({
    selector: 'about-component',
    template: `
    <div>
        <h3>
            About
        </h3>
        <div>
            <p>
                So cuffed therefore by some sadistically mallard rewrote yet accommodatingly more cat adequate pesky far this dear
                fitting and groundhog horse some selfish jeepers juggled about since upheld heatedly well much.
            </p>
            <p>
                Therefore falcon usefully crab during onto hello regally rat wiped misread reluctant unlike iguanodon fish far bald
                abjectly far chameleon more scurrilous gagged virtuously sufficient arrogant cobra froze dog waywardly staunch thus
                consoled.
            </p>
            <p>
                Amphibious darn well densely far meanly inanimately incoherent away flamingo outside yet jeez that yawned secret
                evasive dear overrode rat cow one overpaid far hatchet much.
            </p>
            <p>
                Had aerial well well coasted darn chuckled studied underlay fatally the but among because patient or shook depending
                much sloth wetted cheered some bee.
            </p>
            <p>
                Bombastically yikes some coquettish erroneously in therefore disgracefully glanced some connected and goodness more
                read marvelous up one rebukingly darn fuzzily.
            </p>
            <p>
                Meadowlark and hence regarding flaunting amongst steadfastly demurely like far and stiffly bled reluctant alongside
                jeez this save opposite well and this shuddered and smoked wherever condescendingly hey onto much.
            </p>
            <p>
                Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and ouch inside fatuous suitably far fuzzily
                unihibitedly locked froze timidly hello much revealed lorikeet lantern this much one and far decidedly.
            </p>
            <p>
                Crud thanks rethought one correctly friskily slid innocuously ferociously wow by dear and unbound soothing
                unscrupulously one barring inset cassowary that some beaver sheep a unfittingly thus that sighed gosh or but
                far warthog in.
            </p>
            <p>
                Cassowary oh that inventoried followed one convulsive unbridled python more ouch more gosh including plain
                as compositely less mammoth irksome stared oversold so when fled scallop oh buffalo far indelicate
                affirmatively hung gazelle.
            </p>
            <p>
                Roadrunner on hence until up darn tranquilly furrowed far darn circa less far far dear this some amid austere
                aboard a infallibly due a fuzzily far wallaby jeepers.
            </p>
            <p>
                Roadrunner far far withdrew this haltered inside immodest earthworm because towards into hello more that along
                yellow and watchfully darn a.
            </p>
        </div>
    </div>
    `
})

export default class AboutComponent {
}

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
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 HomeComponent from './home.component';
import ProductsComponent from './products.component';
import AboutComponent from './about.component';


const drawerRoutes = [
  { path: '', component: HomeComponent, text: 'Home', icon: 'k-i-globe-outline' },
  { path: 'products', component: ProductsComponent, text: 'Products', icon: 'k-i-cloud' },
  { path: 'about', component: AboutComponent, text: 'About', icon: 'k-i-question' }
];

@NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      ProductsComponent,
      AboutComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      LayoutModule,
      ButtonsModule,
      RouterModule.forRoot(drawerRoutes)
    ],
    providers: [
      {
        provide: APP_BASE_HREF,
        useValue: window.location.pathname
      }
    ],
    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);