All Components

Routing

It is possible to use the PanelBar as a navigational component with the Angular 2 router.

The PanelBar provides two navigation approaches:

This approach enables you to navigate to the routes by clicking the PanelBar items with the RouterLink directive. It is generated from the routes that are available in the router configuration.

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

@Component({
    selector: 'my-app',
     styles: [`
        .layout {
            display: table-cell;
            display: flex;
            width: 100%;
        }
        .navigation-pane {
            min-width: 20%;
            max-width: 20%;
        }
        .content-pane {
            padding-left: 10pt;
        }
    `],
    template: `
    <div class="layout">
        <div class="navigation-pane">
            <kendo-panelbar>
                <kendo-panelbar-item
                    *ngFor="let route of router.config"
                    [id]="route.path"
                    [title]="route.path ? route.path : 'home'"
                    [routerLink]="route.path" >
                </kendo-panelbar-item>
            </kendo-panelbar>
        </div>
        <div class="content-pane">
            <router-outlet></router-outlet>
        </div>
    </div>
    `
})

export class AppComponent {
     private router: Router;

    constructor(router: Router) {
        this.router = router;
    }
}
import { AppComponent }   from './app.component';
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { panelbarRouting, appRoutingProviders } from './panelbar.routes';
import { Router, RouterModule } from '@angular/router';
import HomeComponent from './home.component';
import ProductsComponent from './products.component';
import { LayoutModule } from '@progress/kendo-angular-layout';
import {APP_BASE_HREF} from '@angular/common';

@NgModule({
    declarations: [AppComponent, HomeComponent, ProductsComponent],
    imports:      [BrowserModule, LayoutModule, RouterModule, panelbarRouting ],
    providers:    [appRoutingProviders,
    {provide: APP_BASE_HREF, useValue : window.location.pathname }],// in case of : "Error: Cannot match any routes: 'something'" change this value to '/something'.
    bootstrap:    [AppComponent]
})
export class AppModule {}

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

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

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import HomeComponent from "./home.component";
import ProductsComponent from "./products.component";

export const PanelbarRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'products', component: ProductsComponent }
];

export const appRoutingProviders: any[] = [
];

export const panelbarRouting: ModuleWithProviders = RouterModule.forRoot(PanelbarRoutes);
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 {
}

Getting the Selected Item

When using the stateChange event of the PanelBar, the event handler gets the selected item (route) and passes it to the navigate method of the Router.

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

@Component({
    selector: 'my-app',
    styles: [`
        .layout {
            display: table-cell;
            display: flex;
            width: 100%;
        }
        .navigation-pane {
            min-width: 20%;
            max-width: 20%;
        }
        .content-pane {
            padding-left: 10pt;
        }
    `],
    template: `
    <div class="layout">
        <div class="navigation-pane">
            <kendo-panelbar (stateChange)="stateChange($event)" [selectable]="false">
                <kendo-panelbar-item
                    *ngFor="let route of router.config"
                    [id]="route.path"
                    [title]="route.path ? route.path : 'home'"
                    [selected]="route.path == selectedId">
                    <kendo-panelbar-item
                        *ngFor="let child of route.children"
                        [title]="child?.path || 'about'"
                        [id]="route.path + '/' + child?.path"
                        [selected]="route.path + '/' + child?.path == selectedId"
                    >
                    </kendo-panelbar-item>
                </kendo-panelbar-item>
            </kendo-panelbar>
        </div>
        <div class="content-pane">
            <router-outlet></router-outlet>
        </div>
    </div>
    `
})

export class AppComponent {
    private router: Router;
    private selectedId: string = "";

    constructor(router: Router) {
        this.router = router;
    }

    public stateChange(data: Array<PanelBarItemModel>): boolean {
        let focusedEvent: PanelBarItemModel = data.filter(item => item.focused === true)[0];

        if (focusedEvent.id !== "info") {
           this.selectedId = focusedEvent.id;
           this.router.navigate(["/" + focusedEvent.id]);
        }

        return false;
    }
}
import { AppComponent }   from './app.component';
import { Component, NgModule } from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { panelbarRouting, appRoutingProviders } from './panelbar.routes';
import { Router, RouterModule } from '@angular/router';
import { infoRouting } from './info.routes';

import HomeComponent from './home.component';
import ProductsComponent from './products.component';
import InfoComponent from './info.component';
import AboutComponent from './about.component';
import TeamComponent from './team.component';

import { LayoutModule } from '@progress/kendo-angular-layout';

@NgModule({
    declarations: [AppComponent, HomeComponent, ProductsComponent, InfoComponent, TeamComponent, AboutComponent],
    imports:      [BrowserModule, LayoutModule, panelbarRouting, infoRouting],
    providers:    [appRoutingProviders,
     {provide: APP_BASE_HREF, useValue: window.location.pathname }],// in case of : "Error: Cannot match any routes: 'something'" change this value to '/something'.
    bootstrap:    [AppComponent]
})
export class AppModule {}


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

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

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import HomeComponent from "./home.component";
import ProductsComponent from "./products.component";

export const PanelbarRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'products', component: ProductsComponent }
];

export const appRoutingProviders: any[] = [
];

export const panelbarRouting: ModuleWithProviders = RouterModule.forRoot(PanelbarRoutes);

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import TeamComponent from "./team.component";
import InfoComponent from "./info.component";
import AboutComponent from "./about.component";

export const InfoRoutes: Routes = [
    {
        path: 'info',
        component: InfoComponent,
        children: [
            { path: 'about', component: AboutComponent },
            { path: 'team', component: TeamComponent }
        ]
    }
];

export const infoRouting: ModuleWithProviders = RouterModule.forRoot(InfoRoutes);
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({
    template: `
        <router-outlet></router-outlet>
    `
})

export default class InfoComponent {
}
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 { Component } from '@angular/core';

@Component({
    selector: 'team-component',
    template: `
            <div>
                <h3>Team</h3>
                <div>
                    <p>Leapt sprang volubly that or adroitly cozy sold creepy shuffled spent flirted withdrew gosh zebra prideful swung yawned monkey penguin.</p>
                    <p>This wow flinched one immoral this dear far inflexible newt far outside up hey excluding goodness hello much after feverishly direly fitted wow some youthful crud stark more strict unjustifiable that told one.</p>
                    <p>Shark audible mistook removed tryingly much delicate yet sudden after contrary thus brusque more won wallaby frowningly much censorious spryly thanks circuitous this sewed dreamed wow.</p>
                    <p>The against alas less adoringly some cutting aboard lighted some dear agilely and enticingly before thanks upon was neglectful merrily some porpoise tenably and and groundhog together kiwi much barked miser.</p>
                    <p>Much flamingo mocking much far far some since among ritually since crud near one tartly left far and far this ineffectively goodness mighty some and intricately far.</p>
                    <p>Modestly mastodon hypocritically hatchet gerbil successful dispassionate nefariously and the dangerously far in one less save gosh became and sparing that by alas.</p>
                </div>
            </div>
    `
})

export default class TeamComponent {
}
In this article