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;
}
.panelbarLink {
flex: 1 0 100%;
padding: 8px;
margin: -8px;
}
`],
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]="''"
[selected]="route.path == selectedId">
<ng-template kendoPanelBarItemTitle>
<a class="k-link panelbarLink" [routerLink]="route.path">
{{ route.path ? route.path : 'home' }}
</a>
</ng-template>
<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 = '';
constructor(router: Router) {
this.router = router;
}
public stateChange(data: Array<PanelBarItemModel>): boolean {
const 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 { Component, NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Router, RouterModule } from '@angular/router';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { panelbarRouting, appRoutingProviders } from './panelbar.routes';
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 { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent, HomeComponent, ProductsComponent,
InfoComponent, TeamComponent, AboutComponent
],
imports: [
BrowserModule, BrowserAnimationsModule,
LayoutModule, panelbarRouting, infoRouting
],
providers: [
appRoutingProviders,
{ provide: APP_BASE_HREF, useValue: window.location.pathname }
],
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 {
}
System.config({
"transpiler": "ts",
"typescriptOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"bundles": {
"https://unpkg.com/rxjs-system-bundle@5.5.6/Rx.system.min.js": [
"rxjs",
"rxjs/*",
"rxjs/operator/*",
"rxjs/operators/*",
"rxjs/observable/*",
"rxjs/scheduler/*",
"rxjs/symbol/*",
"rxjs/add/operator/*",
"rxjs/add/observable/*",
"rxjs/add/observable/dom/*",
"rxjs/util/*"
],
"https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress/kendo-drawing/dist/systemjs/kendo-drawing.js": [
"@progress/kendo-drawing",
"@progress/kendo-drawing/*"
],
"https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress/kendo-charts/dist/systemjs/kendo-charts.js": [
"@progress/kendo-charts"
],
"https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress/kendo-angular-charts/dist/systemjs/kendo-angular-charts.js": [
"@progress/kendo-angular-charts"
],
"https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress/kendo-angular-gauges/dist/systemjs/kendo-angular-gauges.js": [
"@progress/kendo-angular-gauges"
],
"https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress/kendo-angular-resize-sensor/dist/systemjs/kendo-angular-resize-sensor.js": [
"@progress/kendo-angular-resize-sensor"
],
"https://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik/kendo-intl/dist/systemjs/kendo-intl.js": [
"@telerik/kendo-intl"
],
"https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress/kendo-angular-intl/dist/systemjs/kendo-angular-intl.js": [
"@progress/kendo-angular-intl"
]
},
"meta": {
"typescript": {
"exports": "ts"
},
"*.json": {
"loader": "systemjs-json-plugin"
}
},
"map": {
"app": "app",
"systemjs-json-plugin": "https://unpkg.com/systemjs-plugin-json@0.3.0/json.js",
"@telerik": "https://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik",
"@progress": "https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress",
"cldr-data": "https://www.telerik.com/kendo-angular-ui/npm/node_modules/cldr-data",
"@angular": "https://unpkg.com/@angular",
"angular2-in-memory-web-api": "https://unpkg.com/angular2-in-memory-web-api",
"api-ai-javascript": "https://unpkg.com/api-ai-javascript@2.0.0-beta.21/index.js",
"marked": "https://unpkg.com/marked@0.3.19/lib/marked.js",
"hammerjs": "https://unpkg.com/hammerjs@2.0.8",
"pako": "https://unpkg.com/pako@1.0.5",
"ts": "https://unpkg.com/plugin-typescript@5.3.3/lib/plugin.js",
"tslib": "https://unpkg.com/tslib@1.7.1",
"typescript": "https://unpkg.com/typescript@2.4.2/lib/typescript.js",
"adaptivecards": "https://unpkg.com/adaptivecards@1.0.0/lib/adaptivecards.js",
"botframework-directlinejs": "https://unpkg.com/botframework-directlinejs@0.9.15/built/directLine.js",
"@angular/common/http": "https://unpkg.com/@angular/common@5.2.2/bundles/common-http.umd.js",
"@angular/platform-browser/animations": "https://unpkg.com/@angular/platform-browser@5.2.2/bundles/platform-browser-animations.umd.js",
"@angular/animations/browser": "https://unpkg.com/@angular/animations@5.2.2/bundles/animations-browser.umd.js",
"@angular/common": "https://unpkg.com/@angular/common@5.2.2",
"@angular/compiler": "https://unpkg.com/@angular/compiler@5.2.2",
"@angular/forms": "https://unpkg.com/@angular/forms@5.2.2",
"@angular/core": "https://unpkg.com/@angular/core@5.2.2",
"@angular/platform-browser": "https://unpkg.com/@angular/platform-browser@5.2.2",
"@angular/platform-browser-dynamic": "https://unpkg.com/@angular/platform-browser-dynamic@5.2.2",
"@angular/router": "https://unpkg.com/@angular/router@5.2.2",
"@angular/upgrade": "https://unpkg.com/@angular/upgrade@5.2.2"
},
"packages": {
"app": {
"main": "./main.ts",
"defaultExtension": "ts"
},
"rxjs": {
"defaultExtension": false
},
"pako": {
"defaultExtension": "js",
"main": "./index.js"
},
"@angular/common": {
"main": "/bundles/common.umd.js"
},
"@angular/compiler": {
"main": "/bundles/compiler.umd.js"
},
"@angular/forms": {
"main": "bundles/forms.umd.js",
"defaultExtension": "js"
},
"@angular/core": {
"main": "/bundles/core.umd.js"
},
"@angular/platform-browser": {
"main": "/bundles/platform-browser.umd.js"
},
"@angular/platform-browser-dynamic": {
"main": "/bundles/platform-browser-dynamic.umd.js"
},
"@angular/router": {
"main": "/bundles/router.umd.js"
},
"@angular/upgrade": {
"main": "/bundles/upgrade.umd.js"
},
"@angular/animations": {
"main": "/bundles/animations.umd.js"
},
"@progress/kendo-angular-buttons": {
"main": "dist/cdn/js/kendo-angular-buttons.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-l10n": {
"main": "dist/cdn/js/kendo-angular-l10n.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-inputs": {
"main": "dist/cdn/js/kendo-angular-inputs.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-dropdowns": {
"main": "dist/cdn/js/kendo-angular-dropdowns.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-popup": {
"main": "dist/cdn/js/kendo-angular-popup.js",
"defaultExtension": "js"
},
"@progress/kendo-data-query": {
"main": "dist/cdn/js/kendo-data-query.js",
"defaultExtension": "js"
},
"@progress/kendo-file-saver": {
"main": "dist/npm/main.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-conversational-ui": {
"main": "dist/cdn/js/kendo-angular-conversational-ui.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-dateinputs": {
"main": "dist/cdn/js/kendo-angular-dateinputs.js",
"defaultExtension": "js"
},
"@progress/kendo-date-math": {
"main": "dist/cdn/js/kendo-date-math.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-dialog": {
"main": "dist/cdn/js/kendo-angular-dialog.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-grid": {
"main": "dist/cdn/js/kendo-angular-grid.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-excel-export": {
"main": "dist/cdn/js/kendo-angular-excel-export.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-label": {
"main": "dist/cdn/js/kendo-angular-label.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-layout": {
"main": "dist/cdn/js/kendo-angular-layout.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-menu": {
"main": "dist/cdn/js/kendo-angular-menu.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-tooltip": {
"main": "dist/cdn/js/kendo-angular-tooltip.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-toolbar": {
"main": "dist/cdn/js/kendo-angular-toolbar.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-ripple": {
"main": "dist/cdn/js/kendo-angular-ripple.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-scrollview": {
"main": "dist/cdn/js/kendo-angular-scrollview.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-sortable": {
"main": "dist/cdn/js/kendo-angular-sortable.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-treeview": {
"main": "dist/cdn/js/kendo-angular-treeview.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-upload": {
"main": "dist/cdn/js/kendo-angular-upload.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-pdf-export": {
"main": "dist/cdn/js/kendo-angular-pdf-export.js",
"defaultExtension": "js"
},
"@progress/kendo-react-inputs": {
"main": "dist/cdn/js/kendo-react-inputs.js",
"defaultExtension": "js"
},
"@progress/kendo-react-dateinputs": {
"main": "dist/cdn/js/kendo-react-dateinputs.js",
"defaultExtension": "js"
},
"@progress/kendo-react-popup": {
"main": "dist/cdn/js/kendo-react-popup.js",
"defaultExtension": "js"
},
"@progress/kendo-angular-intl": {
"defaultExtension": "js"
}
}
});
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.telerik.com/kendo-angular-ui/npm/node_modules//@progress/kendo-theme-default/dist/all.css" crossorigin="anonymous" />
<!-- 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.8.12/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!-- Example-specific styles -->
<style>
body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; }
my-app { display: block; width: 100%; min-height: 80px; box-sizing: border-box; padding: 30px; }
my-app > .k-icon.k-i-loading { font-size: 64px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.example-wrapper { min-height: 280px; align-content: flex-start; }
.example-wrapper p, .example-col p { margin: 0 0 10px; }
.example-wrapper p:first-child, .example-col p:first-child { margin-top: 0; }
.example-col { display: inline-block; vertical-align: top; padding-right: 20px; padding-bottom: 20px; }
.example-config { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); }
.event-log { margin: 0; padding: 0; max-height: 100px; overflow-y: auto; list-style-type: none; border: 1px solid rgba(0,0,0,.08); background-color: #fff; }
.event-log li {margin: 0; padding: .3em; line-height: 1.2em; border-bottom: 1px solid rgba(0,0,0,.08); }
.event-log li:last-child { margin-bottom: -1px;}
</style>
</head>
<!-- 3. Display the application -->
<body>
<my-app>
<span class="k-icon k-i-loading" style="color: #ff6358"></span>
</my-app>
</body>
</html>