<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="http://www.telerik.com/kendo-angular-ui/npm/node_modules//@telerik/kendo-theme-default/dist/all.css" />
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.21?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
'@progress': 'http://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress',
'@telerik': 'http://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// angular testing umd bundles
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'chroma-js': 'npm:chroma-js@1.2.1',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@1.9.0-dev.20160409/lib/typescript.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
"@progress/kendo-angular-grid": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-charts": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-dropdowns": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-popup": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-inputs": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-layout": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-buttons": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-dialog": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-upload": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-buttons": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-popup": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-scrollview": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-sortable": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
"@progress/kendo-angular-intl": {"main":"./dist/npm/js/main.js","defaultExtension":"js"},
'@telerik/kendo-inputs-common': {
defaultExtension: 'js'
},
'@telerik/kendo-draggable': {
defaultExtension: 'js',
main: "./dist/npm/js/Draggable.js"
},
'@telerik/kendo-dropdowns-common': {
defaultExtension: 'js',
main: "./dist/npm/js/bundle.js"
},
'@telerik/kendo-intl': {
defaultExtension: 'js',
main: "dist/npm/js/main.js"
},
'@progress/kendo-angular-intl': {
defaultExtension: 'js',
main: "dist/npm/js/main.js"
},
'@progress/kendo-charts': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'@progress/kendo-drawing': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'@progress/kendo-popup-common': {
defaultExtension: 'js',
main: "./dist/npm/js/bundle.js"
},
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
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: `
<h1>Routing with PanelBar and 'onChange' event</h1>
<div class="layout">
<div class="navigation-pane">
<kendo-panelbar (onChange)="onChange($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 onChange(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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { HttpModule } from '@angular/http';
import { routing, routingProviders } from './app.routing';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from "./home.component";
import { ProductsComponent } from "./products.component";
import { AboutComponent } from "./about.component";
import { TeamComponent } from "./team.component";
import { InfoComponent } from "./info.component";
@NgModule({
imports: [ BrowserModule, LayoutModule, HttpModule, routing ], //RouterModule
declarations: [
AppComponent,
HomeComponent,
ProductsComponent,
AboutComponent,
TeamComponent,
InfoComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from "./home.component";
import { ProductsComponent } from "./products.component";
import { AboutComponent } from "./about.component";
import { TeamComponent } from "./team.component";
import { InfoComponent } from "./info.component";
const AppRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'products', component: ProductsComponent },
{
path: 'info',
component: InfoComponent,
children: [
{ path: 'about', component: AboutComponent },
{ path: 'team', component: TeamComponent }
]
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
import { Component } from '@angular/core';
@Component({
selector: 'home-component',
template: `
<div>
<h2>Home page</h2>
<div>
<p>Home page of PanelBar router demo.</p>
</div>
</div>
`
})
export class HomeComponent {
}
import { Component } from '@angular/core';
@Component({
selector: 'products-component',
template: `
<div>
<h2>Products</h2>
<div>
<p>Products page of PanelBar router demo.</p>
</div>
</div>
`
})
export class ProductsComponent {
}
### Kendo UI for Angular 2: PanelBar routing demo
This demo shows how to use the PanelBar as navigation component with the Angular 2 router.
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 class TeamComponent {
}
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 class AboutComponent {
}
import { Component } from '@angular/core';
@Component({
template: `
<router-outlet></router-outlet>
`
})
export class InfoComponent {
}