Show data for tests

src/app/app-nav.component.scss

@@ -8,10 +8,7 @@ ul {
     font-weight: bold;
 }
 
-.file {
-
-    &:hover {
-        background-color: antiquewhite;
-        cursor: pointer;
-    }
+.file:hover {
+    background-color: antiquewhite;
+    cursor: pointer;
 }
\ No newline at end of file

src/app/app.component.html

@@ -3,10 +3,37 @@
     <app-nav [data]="data">
     </app-nav>
   </nav>
-  <h1>
-    Section
+  <h1 *ngIf="page">
+    <span>{{page.fileName}}</span>
   </h1>
-  <div>
-    <router-outlet></router-outlet>
+  <div *ngIf="page">
+    <div class="arine">
+      <span *ngFor="let nom of page.path">{{nom}}</span>
+    </div>
+    <div *ngIf="page.data.__compat">
+      <div *ngIf="page.data.__compat.mdn_url">
+        <a [href]="page.data.__compat.mdn_url">MDN</a>
+      </div>
+      <div *ngIf="page.data.__compat.status">
+        <span *ngIf="page.data.__compat.status.deprecated">deprecated</span>
+        <span *ngIf="page.data.__compat.status.experimental">experimental</span>
+        <span *ngIf="page.data.__compat.status.standard_track">standard</span>
+      </div>
+      <div *ngIf="page.data.__compat.support"
+           class="browsers">
+        <div *ngFor="let browser of (page.data.__compat.support | ngForObject)"
+             class="browser">
+          <span>{{browser.key}}</span>
+          <ng-container *ngIf="isArray(browser.value); else one">
+            <span *ngFor="let value of browser.value">
+              {{value.version_added || (value.version_added ? 'yes' : 'no')}}
+            </span>
+          </ng-container>
+          <ng-template #one>
+            <span *ngIf="browser.value">{{browser.value.version_added || (value.version_added ? 'yes' : 'no')}}</span>
+          </ng-template>
+        </div>
+      </div>
+    </div>
   </div>
 </ng-container>
\ No newline at end of file

src/app/app.component.scss

@@ -10,10 +10,12 @@ app-root {
     display: grid;
     grid-template: [header-left] "nav title" auto [header-right]
                    [footer-left] "nav page"  1fr  [footer-right] / 350px 1fr;
+    height: 100%;
 }
 
 nav {
     grid-area: nav;
+    overflow: auto;
 }
 
 h1 {
@@ -24,4 +26,19 @@ h1 {
 
 div {
     grid-area: page;
+}
+
+.arine span:not(:last-child)::after {
+    content: " » ";
+}
+
+.browsers {
+    display:flex;
+}
+.browser {
+    display:flex;
+    flex-direction: column;
+    padding: 5px;
+    text-align: center;
+    flex: 1 1 auto;
 }
\ No newline at end of file

src/app/app.component.ts

 import { Component, ViewEncapsulation } from '@angular/core';
-import { AppService, DataValue } from './app.service';
+import { AppService, DataValue, ChangePage } from './app.service';
 
 @Component({
   selector: 'app-root',
@@ -11,6 +11,8 @@ export class AppComponent {
   version = '0.1.0';
   title = 'web-table';
 
+  page: ChangePage;
+
   get data(): { [key: string]: DataValue } {
     return this.appService.data;
   }
@@ -21,6 +23,14 @@ export class AppComponent {
     appService.onData.subscribe(() => {
       this.isInit = true;
     });
+    appService.onChangePage.subscribe((page: ChangePage) => {
+      this.page = page;
+      console.log(page);
+    });
+  }
+
+  isArray(data: any): boolean {
+    return typeof data === 'object' && data.length;
   }
 
 }

src/app/app.service.ts

@@ -3,9 +3,10 @@ import { HttpClient } from '@angular/common/http';
 
 import { Subject } from 'rxjs';
 
-import { BcdData } from './browser-compat-data';
+import { BcdData, BcdDataType } from './browser-compat-data';
 
 export type DataValue = (string | { [key: string]: DataValue })[];
+export interface ChangePage { path: string[]; fileName: string; data: BcdDataType; }
 
 const pattern = /\.\/([^\/]+)\/(.*)/;
 
@@ -15,7 +16,7 @@ const pattern = /\.\/([^\/]+)\/(.*)/;
 export class AppService {
 
   readonly onData = new Subject<void>();
-  readonly changePage = new Subject<void>();
+  readonly onChangePage = new Subject<ChangePage>();
 
   isInit = false;
 
@@ -89,12 +90,19 @@ export class AppService {
       .get('./assets/browser-compat-data' + path, { responseType: 'json' })
       .subscribe(
         (data: BcdData) => {
-          console.log(data);
-          this.page = data;
-        },
-        () => { },
-        () => {
-          this.changePage.next();
-        });
+          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++) {
+            part = part[frag[i]];
+          }
+          this.onChangePage.next({
+            path: frag,
+            fileName: fileName.replace(/_/g, ' '),
+            data: part[fileName]
+          });
+        }
+      );
   }
 }