Add route navigation

src/app/app-nav.component.html

@@ -9,7 +9,8 @@
   </li>
   <li class="file"
       *ngFor="let line of files"
-      (click)="action(line.fileName)">
+      [routerLink]="path + '/' + line.fileName"
+      [class.active]="isActivePage(path + '/' + line.fileName)">
     {{line.name}}
   </li>
 </ul>
\ No newline at end of file

src/app/app-nav.component.scss

@@ -12,3 +12,7 @@ ul {
     background-color: antiquewhite;
     cursor: pointer;
 }
+
+.active {
+    color :red;
+}
\ No newline at end of file

src/app/app-nav.component.ts

 import { Component, Input } from '@angular/core';
 import { DataValue, AppService } from './app.service';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-nav',
@@ -39,10 +40,9 @@ export class AppNavComponent {
         return list;
     }
 
-    constructor(private appService: AppService) { }
+    constructor(private router: Router) { }
 
-    action(path: string) {
-        this.appService.show(this.path + '/' + path);
+    isActivePage(page: any): boolean {
+        return page === this.router.url;
     }
-
 }

src/app/app-page.component.html

+<h1 *ngIf="page">
+  <span>{{page.fileName}}</span>
+</h1>
+<div *ngIf="page">
+  <div class="arine">
+    <span *ngFor="let nom of page.path">{{nom}}</span>
+  </div>
+  <div>
+    <browser-line></browser-line>
+    <element-line *ngIf="page.data.__compat"
+                  [element]="page.data.__compat"
+                  [name]="page.fileName"></element-line>
+    <ng-container *ngFor="let data of (page.data | ngForObject)">
+      <element-line *ngIf="data.key !== '__compat'"
+                    [element]="data.value.__compat"
+                    [name]="data.key"></element-line>
+    </ng-container>
+  </div>
+</div>
\ No newline at end of file

src/app/app-page.component.scss

+
+h1 {
+    grid-area: title;
+    margin: 0;
+    padding: 10px 0;
+}
+
+div {
+    grid-area: page;
+}
+
+.arine span:not(:last-child)::after {
+    content: " » ";
+}

src/app/app-page.component.ts

+import { Component, Input } from '@angular/core';
+import { DataValue, AppService, ChangePage } from './app.service';
+import { ActivatedRoute, UrlSegment } from '@angular/router';
+
+@Component({
+    selector: 'app-page',
+    templateUrl: './app-page.component.html',
+    styleUrls: ['./app-page.component.scss']
+})
+export class AppPageComponent {
+
+    page: ChangePage;
+
+    get data(): { [key: string]: DataValue } {
+        return this.appService.data;
+    }
+
+    isInit = false;
+
+    constructor(
+        private appService: AppService,
+        private route: ActivatedRoute
+    ) {
+        appService.onData.subscribe(() => {
+            this.isInit = true;
+        });
+        appService.onChangePage.subscribe((page: ChangePage) => {
+            this.page = page;
+        });
+        this.route.url.subscribe((segment: UrlSegment[]) => {
+            this.appService.show(segment.join('/'));
+        });
+    }
+}

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AppPageComponent } from './app-page.component';
 
-const routes: Routes = [];
-
+const routes: Routes = [
+  {
+    path: '**',
+    component: AppPageComponent
+  }
+];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]

src/app/app.component.html

 <ng-container *ngIf="isInit">
   <nav>
-    <app-nav [data]="data">
-    </app-nav>
+    <app-nav [data]="data"></app-nav>
   </nav>
-  <h1 *ngIf="page">
-    <span>{{page.fileName}}</span>
-  </h1>
-  <div *ngIf="page">
-    <div class="arine">
-      <span *ngFor="let nom of page.path">{{nom}}</span>
-    </div>
-    <div>
-      <browser-line></browser-line>
-      <element-line *ngIf="page.data.__compat"
-                    [element]="page.data.__compat"
-                    [name]="page.fileName"></element-line>
-      <ng-container *ngFor="let data of (page.data | ngForObject)">
-        <element-line *ngIf="data.key !== '__compat'"
-                      [element]="data.value.__compat"
-                      [name]="data.key"></element-line>
-      </ng-container>
-    </div>
-  </div>
+  <router-outlet></router-outlet>
 </ng-container>
\ No newline at end of file

src/app/app.component.scss

@@ -17,17 +17,3 @@ nav {
     grid-area: nav;
     overflow: auto;
 }
-
-h1 {
-    grid-area: title;
-    margin: 0;
-    padding: 10px 0;
-}
-
-div {
-    grid-area: page;
-}
-
-.arine span:not(:last-child)::after {
-    content: " » ";
-}

src/app/app.component.ts

 import { Component, ViewEncapsulation } from '@angular/core';
-import { AppService, DataValue, ChangePage } from './app.service';
+import { ActivatedRoute, UrlSegment } from '@angular/router';
+import { AppService, DataValue } from './app.service';
 
 @Component({
   selector: 'app-root',
@@ -11,21 +12,17 @@ export class AppComponent {
   version = '0.1.0';
   title = 'web-table';
 
-  page: ChangePage;
-
   get data(): { [key: string]: DataValue } {
     return this.appService.data;
   }
 
   isInit = false;
 
-  constructor(private appService: AppService) {
+  constructor(
+    private appService: AppService
+  ) {
     appService.onData.subscribe(() => {
       this.isInit = true;
     });
-    appService.onChangePage.subscribe((page: ChangePage) => {
-      this.page = page;
-      console.log(page);
-    });
   }
 }

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppNavComponent } from './app-nav.component';
+import { AppPageComponent } from './app-page.component';
 import { AppComponent } from './app.component';
 import { BrowserLineComponent } from './browser-line.component';
 import { ElementLineComponent } from './element-line.component';
@@ -15,6 +16,7 @@ import { NgForObjectPipe } from './ngfor-object';
     AppNavComponent,
     ElementLineComponent,
     BrowserLineComponent,
+    AppPageComponent,
     NgForObjectPipe
   ],
   imports: [

src/app/app.service.ts

@@ -49,8 +49,6 @@ export class AppService {
 
   parselist(data: string) {
     const list = data.split('\n');
-    // list.sort();
-
     // browser infos
     for (const line of list) {
       if (line) {
@@ -98,7 +96,6 @@ export class AppService {
             browsers[b.id] = b;
           });
           this.browsers = browsers;
-          console.log(browsers);
         }
       );
   }
@@ -108,11 +105,10 @@ export class AppService {
       this.onChangePage.next(this.pages[path]);
     } else {
       this.http
-        .get('./assets/browser-compat-data' + path, { responseType: 'json' })
+        .get('./assets/browser-compat-data/' + path, { responseType: 'json' })
         .subscribe(
           (data: BcdData) => {
             const frag = path.split('/');
-            frag.shift();
             const fileName = frag.pop().replace(/\.json/g, '');
             let part: any = data;
             for (let i = 0; i < frag.length; i++) {

src/app/browser-line.component.ts

@@ -9,17 +9,10 @@ import { BcdSupportDesc } from './browser-compat-data';
 })
 export class BrowserLineComponent {
 
-
-
     get browsers() {
-
-        console.log("browsers >", this.appService.browsers);
-
         return this.appService.browsers;
     }
 
     constructor(private appService: AppService) { }
 
-
-
 }

src/app/element-line.component.scss

@@ -9,6 +9,12 @@
     border: 1px solid #DDD;
     border-right: 0;
     padding: 5px 0;
+
+    & /deep/ code {
+        background-color: #ececec;
+        border-radius: 3px;
+        padding: 2px 4px;
+    }
 }
 
 .status span {
@@ -23,10 +29,6 @@
     display: inline-block;
     cursor: default;
 
-    &.deprecated {
-
-    }
-
     &.experimental {
         background-color: #cfa631;
     }