feat(app): Automatically set pageTitle from route data

apps/webapp/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ServiceWorkerService } from '@ngx-starter-kit/core';
+import { PageTitleService, ServiceWorkerService } from '@ngx-starter-kit/core';
 import { Meta, Title } from '@angular/platform-browser';
 
 @Component({
@@ -9,7 +9,8 @@ import { Meta, Title } from '@angular/platform-browser';
   encapsulation: ViewEncapsulation.None,
 })
 export class AppComponent implements OnInit {
-  constructor(private sw: ServiceWorkerService, public meta: Meta) {
+  // HINT: keep PageTitleService injected here, so that, it get initialized during bootstrap
+  constructor(private sw: ServiceWorkerService, public meta: Meta, private pageTitleService: PageTitleService) {
     meta.addTags([
       { charset: 'UTF-8' },
       { name: 'description', content: 'NGX Starter Kit' },

apps/webapp/src/app/app.module.ts

@@ -28,7 +28,7 @@ export class MyHammerConfig extends HammerGestureConfig {
         { path: '', redirectTo: 'home', pathMatch: 'full' },
         { path: 'home', loadChildren: '@ngx-starter-kit/home#HomeModule', data: { preload: true } },
         { path: 'dashboard', loadChildren: '@ngx-starter-kit/dashboard#DashboardModule', data: { preload: true } },
-        { path: '404', loadChildren: '@ngx-starter-kit/not-found#NotFoundModule' },
+        { path: '404', loadChildren: '@ngx-starter-kit/not-found#NotFoundModule', data: { title: '404' } },
         // 404 should be last
         { path: '**', redirectTo: '404', pathMatch: 'full' },
       ],

libs/core/src/lib/services/page-title.service.ts

@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 import { Title } from '@angular/platform-browser';
+import { ActivatedRouteSnapshot, NavigationEnd, Router, RouterState } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
+declare var ga: any;
 /**
  * Service responsible for setting the title that appears above the home and dashboard pages.
  */
@@ -9,21 +12,30 @@ import { Title } from '@angular/platform-browser';
 })
 export class PageTitleService {
   private readonly defaultTitle;
-  private _title = '';
+  public titleSet: Set<string>;
 
-  get title(): string {
-    return this._title;
-  }
+  constructor(private router: Router, private bodyTitle: Title) {
+    this.defaultTitle = bodyTitle.getTitle() || 'WebApp';
 
-  set title(title: string) {
-    this._title = title;
-    if (title !== '') {
-      title = `${title} |`;
-    }
-    this.bodyTitle.setTitle(`${title} ${this.defaultTitle}`);
-  }
+    // Automatically set pageTitle from route data
+    router.events
+      .pipe(filter((event: any) => event instanceof NavigationEnd))
+      .subscribe((n: NavigationEnd) => {
+        const titleSet = new Set();
+        let root = this.router.routerState.snapshot.root;
+        do {
+          root = root.children[0];
+          if (root.data['title']) {
+            titleSet.add(root.data['title']);
+          }
+        } while (root.children.length > 0);
 
-  constructor(private bodyTitle: Title) {
-    this.defaultTitle = bodyTitle.getTitle() || 'WebApp';
+        this.titleSet = titleSet;
+        bodyTitle.setTitle(`${Array.from(titleSet).reverse().join(' | ')} | ${this.defaultTitle}`);
+
+        ga('send', 'pageview', n.urlAfterRedirects);
+    });
   }
+
 }
+

libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts

@@ -7,7 +7,6 @@ import { Actions, Store } from '@ngxs/store';
 import { ConnectWebSocket, DisconnectWebSocket } from '@ngx-starter-kit/socketio-plugin';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { environment } from '@env/environment';
-import { PageTitleService } from '@ngx-starter-kit/core';
 
 @Component({
   selector: 'ngx-dashboard-layout',
@@ -33,12 +32,10 @@ export class DashboardLayoutComponent implements OnInit, OnDestroy {
     private store: Store,
     private actions$: Actions,
     private media: ObservableMedia,
-    private oauthService: OAuthService,
-    private pageTitleService: PageTitleService,
+    private oauthService: OAuthService
   ) {}
 
   ngOnInit() {
-    this.pageTitleService.title = 'Dashboard';
 
     this._mediaSubscription = this.media.subscribe((change: MediaChange) => {
       const isMobile = change.mqAlias === 'xs' || change.mqAlias === 'sm';

libs/dashboard/src/lib/dashboard.module.ts

@@ -29,7 +29,7 @@ import { environment } from '@env/environment';
         path: '',
         component: DashboardLayoutComponent,
         canActivate: [AuthGuard],
-        data: { animation: 'dashboard' },
+        data: { title: 'Dashboard', animation: 'dashboard' },
         children: [
           {
             path: 'overview',
@@ -39,17 +39,17 @@ import { environment } from '@env/environment';
           {
             path: '',
             loadChildren: '@ngx-starter-kit/widgets#WidgetsModule',
-            data: { animation: 'overview', preload: true },
+            data: { title: 'Widgets', animation: 'overview', preload: true },
           },
           {
             path: 'grid',
             loadChildren: '@ngx-starter-kit/grid#GridModule',
-            data: { animation: 'grid', preload: true },
+            data: { title: 'Grid', animation: 'grid', preload: true },
           },
           {
             path: 'experiments',
             loadChildren: '@ngx-starter-kit/experiments#ExperimentsModule',
-            data: { animation: 'experiments' },
+            data: { title: 'Experiments', animation: 'experiments' },
           },
         ],
       },

libs/experiments/src/lib/experiments.module.ts

@@ -45,52 +45,52 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F
       {
         path: 'animations',
         component: AnimationsComponent,
-        data: { animations: 'animations' },
+        data: { title: 'Animations', animations: 'animations' },
       },
       {
         path: 'file-upload',
         component: FileUploadComponent,
-        data: { animation: 'file-upload' },
+        data: { title: 'File Upload', animation: 'file-upload' },
       },
       {
         path: 'context-menu',
         component: ContextMenuComponent,
-        data: { animation: 'context-menu' },
+        data: { title: 'Context Menu', animation: 'context-menu' },
       },
       {
         path: 'virtual-scroll',
         component: VirtualScrollComponent,
-        data: { animation: 'virtual-scroll' },
+        data: { title: 'Virtual Scroll', animation: 'virtual-scroll' },
       },
       {
         path: 'table',
         component: StickyTableComponent,
-        data: { animation: 'sticky-table' },
+        data: { title: 'Sticky Table', animation: 'sticky-table' },
       },
       {
         path: 'clap',
         component: ClapButtonComponent,
-        data: { animation: 'clap' },
+        data: { title: 'Clap', animation: 'clap' },
       },
       {
         path: 'led',
         component: LedDemoComponent,
-        data: { animation: 'led' },
+        data: { title: 'Led', animation: 'led' },
       },
       {
         path: 'knob',
         component: KnobDemoComponent,
-        data: { animation: 'Knob' },
+        data: { title: 'Knob', animation: 'Knob' },
       },
       {
         path: 'image-comp',
         component: ImageCompComponent,
-        data: { animation: 'imagecomp' },
+        data: { title: 'ImageComp', animation: 'imagecomp' },
       },
       {
         path: 'layout',
         component: LayoutComponent,
-        data: { animation: 'layout' },
+        data: { title: 'Layout', animation: 'layout' },
       },
     ]),
   ],

libs/grid/src/lib/grid.module.ts

@@ -23,10 +23,10 @@ import { AccountEditComponent } from './components/account-edit/account-edit.com
       {
         path: 'crud-table',
         component: AccountsTableComponent,
-        data: { animation: 'accounts-table' },
-        children: [{ path: ':id', component: AccountDetailComponent, data: { animation: 'account-detail' } }],
+        data: { title: 'Accounts Table', animation: 'accounts-table' },
+        children: [{ path: ':id', component: AccountDetailComponent, data: { title: 'Account Detail', animation: 'account-detail' } }],
       },
-      { path: 'grid-list', component: AccountsGridListComponent, data: { animation: 'accounts-grid-list' } },
+      { path: 'grid-list', component: AccountsGridListComponent, data: { title: 'Accounts Grid List', animation: 'accounts-grid-list' } },
     ]),
   ],
   declarations: [AccountsTableComponent, AccountsGridListComponent, AccountDetailComponent, AccountEditComponent],

libs/home/src/lib/containers/blog/blog.component.ts

@@ -5,8 +5,6 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './blog.component.html',
   styleUrls: ['./blog.component.scss'],
 })
-export class BlogComponent implements OnInit {
+export class BlogComponent {
   constructor() {}
-
-  ngOnInit() {}
 }

libs/home/src/lib/containers/home-layout/home-layout.component.ts

@@ -1,17 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { routerTransition } from '@ngx-starter-kit/animations';
-import { PageTitleService } from '@ngx-starter-kit/core';
 
 @Component({
   selector: 'ngx-home-layout',
   templateUrl: './home-layout.component.html',
   styleUrls: ['./home-layout.component.scss'],
   animations: [routerTransition],
 })
-export class HomeLayoutComponent implements OnInit {
-  constructor(private pageTitleService: PageTitleService) {}
-
-  ngOnInit() {
-    this.pageTitleService.title = 'Home';
-  }
+export class HomeLayoutComponent {
+  constructor() {}
 }

libs/home/src/lib/containers/landing/landing.component.ts

@@ -1,15 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { PageTitleService } from '@ngx-starter-kit/core';
 
 @Component({
   selector: 'ngx-landing',
   templateUrl: './landing.component.html',
   styleUrls: ['./landing.component.scss'],
 })
-export class LandingComponent implements OnInit {
-  constructor(private pageTitleService: PageTitleService) {}
-
-  ngOnInit(): void {
-    this.pageTitleService.title = 'Landing Page';
-  }
+export class LandingComponent {
+  constructor() {}
 }

libs/home/src/lib/home.module.ts

@@ -24,27 +24,27 @@ import { StickyHeaderDirective } from './components/header/sticky-header.directi
       {
         path: '',
         component: HomeLayoutComponent,
-        data: { animation: 'home' },
+        data: { title: 'Home', animation: 'home' },
         children: [
           {
             path: '',
             component: LandingComponent,
-            data: { animation: 'home' },
+            data: { title: 'Landing', animation: 'home' },
           },
           {
             path: 'blog',
             component: BlogComponent,
-            data: { animation: 'blog' },
+            data: { title: 'Blog', animation: 'blog' },
           },
           {
             path: 'about',
             component: AboutComponent,
-            data: { animation: 'about' },
+            data: { title: 'About', animation: 'about' },
           },
           {
             path: 'features',
             component: FeaturesComponent,
-            data: { animation: 'features' },
+            data: { title: 'Features', animation: 'features' },
           },
         ],
       },