Add routing to component-viewer

Author: jelbourn

src/app/app-module.ts

@@ -11,18 +11,14 @@ import {routing} from './routes';
 import {ComponentList} from './pages/component-list/component-list';
 import {DocViewerModule} from './shared/doc-viewer/index';
 import {ExampleViewerModule} from './shared/example-viewer/index';
+import {ComponentViewer} from './pages/component-viewer/component-viewer';
 
 
 @NgModule({
   declarations: [
     MaterialDocsApp,
     ComponentList,
-    Homepage,
-    NavBar,
-  ],
-  exports: [
-    MaterialDocsApp,
-    ComponentList,
+    ComponentViewer,
     Homepage,
     NavBar,
   ],

src/app/pages/component-list/component-list.html

@@ -1,9 +1,12 @@
-<div *ngFor="let component of componentItems" class="docs-component-list-item">
+<a *ngFor="let component of componentItems"
+    class="docs-component-list-item"
+    [routerLink]="['/component/', component.name]">
   <img src="../../../assets/img/components/{{component.src}}.svg"
       class="docs-component-list-item-icon"
       [alt]="component.name">
   {{component.name}}
-</div>
+</a>
+
 
 
 

src/app/pages/component-list/component-list.ts

@@ -7,30 +7,30 @@ import {Component} from '@angular/core';
 })
 export class ComponentList {
   componentItems = [
-    {name: 'Button', src: 'button'},
-    {name: 'Checkbox', src: 'checkbox'},
-    {name: 'Radio button', src: 'radio'},
-    {name: 'Button toggle', src: 'button-toggle'},
-    {name: 'Input', src: 'input'},
-    {name: 'Textarea', src: 'textarea'},
-    {name: 'Select', src: 'select'},
-    {name: 'Slide toggle', src: 'slide-toggle'},
-    {name: 'Slider', src: 'slider'},
+    {id: 'button', name: 'Button', src: 'button'},
+    {id: 'checkbox', name: 'Checkbox', src: 'checkbox'},
+    {id: 'radio-button', name: 'Radio button', src: 'radio'},
+    {id: 'button-toggle', name: 'Button toggle', src: 'button-toggle'},
+    {id: 'input', name: 'Input', src: 'input'},
+    {id: 'textarea', name: 'Textarea', src: 'textarea'},
+    {id: 'select', name: 'Select', src: 'select'},
+    {id: 'slide-toggle', name: 'Slide toggle', src: 'slide-toggle'},
+    {id: 'slider', name: 'Slider', src: 'slider'},
 
-    {name: 'Card', src: 'card'},
-    {name: 'List', src: 'list'},
-    {name: 'Grid list', src: 'grid-list'},
-    {name: 'Sidenav', src: 'sidenav'},
-    {name: 'Toolbar', src: 'toolbar'},
+    {id: 'card', name: 'Card', src: 'card'},
+    {id: 'list', name: 'List', src: 'list'},
+    {id: 'grid-list', name: 'Grid list', src: 'grid-list'},
+    {id: 'sidenav', name: 'Sidenav', src: 'sidenav'},
+    {id: 'toolbar', name: 'Toolbar', src: 'toolbar'},
 
-    {name: 'Menu', src: 'menu'},
-    {name: 'Dialog', src: 'dialog'},
-    {name: 'Snackbar', src: 'snackbar'},
-    {name: 'Tooltip', src: 'tooltip'},
+    {id: 'menu', name: 'Menu', src: 'menu'},
+    {id: 'dialog', name: 'Dialog', src: 'dialog'},
+    {id: 'snackbar', name: 'Snackbar', src: 'snackbar'},
+    {id: 'tooltip', name: 'Tooltip', src: 'tooltip'},
 
-    {name: 'Progress Spinner', src: 'progress-spinner'},
-    {name: 'Progress Bar', src: 'progress-bar'},
+    {id: 'progress-spinner', name: 'Progress spinner', src: 'progress-spinner'},
+    {id: 'progress-bar', name: 'Progress bar', src: 'progress-bar'},
 
-    {name: 'Icon', src: 'icon'},
+    {id: 'icon', name: 'Icon', src: 'icon'},
   ];
 }

src/app/pages/component-viewer/component-viewer.html

@@ -0,0 +1 @@
+{{componentId}}

src/app/pages/component-viewer/component-viewer.ts

@@ -1,9 +1,17 @@
 import {Component} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-components',
   templateUrl: './component-viewer.html',
   styleUrls: ['./component-viewer.scss']
 })
 export class ComponentViewer {
+  componentId: string;
+
+  constructor(private _route: ActivatedRoute) {
+    _route.params.first().subscribe(p => {
+      this.componentId = p['id'];
+    });
+  }
 }

src/app/routes.ts

@@ -1,11 +1,13 @@
-import { ModuleWithProviders } from '@angular/core';
-import { Homepage } from './pages/homepage';
-import { ComponentList } from './pages/component-list';
-import { Routes, RouterModule } from '@angular/router';
+import {ModuleWithProviders} from '@angular/core';
+import {Homepage} from './pages/homepage';
+import {ComponentList} from './pages/component-list';
+import {Routes, RouterModule} from '@angular/router';
+import {ComponentViewer} from './pages/component-viewer/component-viewer';
 
 const MATERIAL_DOCS_ROUTES: Routes = [
-  { path: '', component: Homepage, pathMatch: 'full' },
-  { path: 'components', component:  ComponentList },
+  {path: '', component: Homepage, pathMatch: 'full'},
+  {path: 'components', component: ComponentList},
+  {path: 'component/:id', component: ComponentViewer},
 ];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(MATERIAL_DOCS_ROUTES);