Dynamic page titles

web/app/app.routing.ts

@@ -17,7 +17,7 @@ const routes: Routes = [
             {
                 path: "home",
                 component: RiotHomeComponent,
-                data: {breadcrumb: "Home"},
+                data: {breadcrumb: "Home", name: "Dimension"},
             },
         ],
     },

web/app/page-header/page-header.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input } from "@angular/core";
+import { Component } from "@angular/core";
+import { ActivatedRoute, NavigationEnd, PRIMARY_OUTLET, Router } from "@angular/router";
 
 @Component({
     selector: "my-page-header",
@@ -6,5 +7,26 @@ import { Component, Input } from "@angular/core";
     styleUrls: ["./page-header.component.scss"],
 })
 export class PageHeaderComponent {
-    @Input() pageName: string;
+
+    public pageName: string;
+
+    constructor(private router: Router, private activatedRoute: ActivatedRoute) {
+        this.router.events.filter(ev => ev instanceof NavigationEnd).subscribe((ev: NavigationEnd) => {
+            console.log(ev);
+            let currentRoute = this.activatedRoute.root;
+            let url = "";
+
+            while (currentRoute.children.length > 0) {
+                let children = currentRoute.children;
+                children.forEach(route => {
+                    currentRoute = route;
+                    url += "/" + route.snapshot.url.map(s => s.path).join("/");
+                    if (route.outlet !== PRIMARY_OUTLET) return;
+                    if (!route.routeConfig || !route.routeConfig.data) return;
+                    if (url === ev.url) this.pageName = route.snapshot.data.name;
+                    console.log(url);
+                });
+            }
+        });
+    }
 }

web/app/riot/riot.component.html

@@ -1,5 +1,5 @@
 <div id="wrapper">
-    <my-page-header pageName="Dimension">
+    <my-page-header>
         <my-scalar-close class="closeButton"></my-scalar-close>
     </my-page-header>
 

web/public/service-worker.js

@@ -1 +0,0 @@
-// This file is intentionally without code.