feat(title): add route title data support and display title when found

tomastrajan · Oct 19, 2017 · 7ab617f · 7ab617f
1 parent 579e753
commit 7ab617f
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package.json b/package.json
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -11,7 +11,10 @@ const routes: Routes = [
   },
   {
     path: 'settings',
-    component: SettingsComponent
+    component: SettingsComponent,
+    data: {
+      title: 'Settings'
+    }
   },
   {
     path: 'examples',

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,7 @@
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { OverlayContainer } from '@angular/cdk/overlay';
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { ActivationEnd, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/takeUntil';
@@ -40,7 +42,9 @@ export class AppComponent implements OnInit, OnDestroy {
 
   constructor(
     public overlayContainer: OverlayContainer,
-    private store: Store<any>
+    private store: Store<any>,
+    private router: Router,
+    private titleService: Title
   ) {}
 
   ngOnInit(): void {
@@ -56,6 +60,18 @@ export class AppComponent implements OnInit, OnDestroy {
       .select(selectorAuth)
       .takeUntil(this.unsubscribe$)
       .subscribe(auth => (this.isAuthenticated = auth.isAuthenticated));
+    this.router.events
+      .filter(event => event instanceof ActivationEnd)
+      .subscribe((event: ActivationEnd) => {
+        let lastChild = event.snapshot;
+        while (lastChild.children.length) {
+          lastChild = lastChild.children[0];
+        }
+        const { title } = lastChild.data;
+        this.titleService.setTitle(
+          title ? `${title} - ${env.appName}` : env.appName
+        );
+      });
   }
 
   ngOnDestroy(): void {

diff --git a/src/app/examples/examples-routing.module.ts b/src/app/examples/examples-routing.module.ts
@@ -18,15 +18,24 @@ const routes: Routes = [
       },
       {
         path: 'todos',
-        component: TodosComponent
+        component: TodosComponent,
+        data: {
+          title: 'Todos'
+        }
       },
       {
         path: 'stock-market',
-        component: StockMarketComponent
+        component: StockMarketComponent,
+        data: {
+          title: 'Stock Market'
+        }
       },
       {
         path: 'theming',
-        component: ParentComponent
+        component: ParentComponent,
+        data: {
+          title: 'Theming'
+        }
       }
     ]
   }

diff --git a/src/app/static/static-routing.module.ts b/src/app/static/static-routing.module.ts
@@ -5,8 +5,12 @@ import { AboutComponent } from './about/about.component';
 import { FeaturesComponent } from './features/features.component';
 
 const routes: Routes = [
-  { path: 'about', component: AboutComponent },
-  { path: 'features', component: FeaturesComponent }
+  { path: 'about', component: AboutComponent, data: { title: 'About' } },
+  {
+    path: 'features',
+    component: FeaturesComponent,
+    data: { title: 'Features' }
+  }
 ];
 
 @NgModule({

diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
@@ -1,6 +1,7 @@
 const packageJson = require('../../package.json');
 
 export const environment = {
+  appName: 'Angular Ngrx Material Starter',
   envName: 'PROD',
   production: true,
   versions: {

diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -6,6 +6,7 @@
 const packageJson = require('../../package.json');
 
 export const environment = {
+  appName: 'Angular Ngrx Material Starter',
   envName: 'DEV',
   production: false,
   versions: {