Update title from routing

After-the-End-of-All-Things · Jun 24, 2023 · 41373f5 · 41373f5
1 parent aeadbda
commit 41373f5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
@@ -11,42 +11,49 @@ const routes: Routes = [
   },
   {
     path: 'login',
+    data: { title: 'Login' },
     loadChildren: () =>
       import('./pages/login/login.module').then((m) => m.LoginPageModule),
   },
   {
     path: 'explore',
     canActivate: [AuthGuard],
+    data: { title: 'Explore' },
     loadChildren: () =>
       import('./pages/explore/explore.module').then((m) => m.ExplorePageModule),
   },
   {
     path: 'travel',
     canActivate: [AuthGuard],
+    data: { title: 'Travel' },
     loadChildren: () =>
       import('./pages/travel/travel.module').then((m) => m.TravelPageModule),
   },
   {
     path: 'town',
     canActivate: [AuthGuard],
+    data: { title: 'Town' },
     loadChildren: () =>
       import('./pages/town/town.module').then((m) => m.TownPageModule),
   },
   {
     path: 'me',
     canActivate: [AuthGuard],
+    data: { title: 'My Profile' },
     loadChildren: () =>
       import('./pages/me/me.module').then((m) => m.MePageModule),
   },
   {
     path: 'options',
     canActivate: [AuthGuard],
+    data: { title: 'Options' },
     loadChildren: () =>
       import('./pages/options/options.module').then((m) => m.OptionsPageModule),
   },
   {
     path: 'inventory',
     canActivate: [AuthGuard],
+    data: { title: 'Inventory' },
     loadChildren: () =>
       import('./pages/inventory/inventory.module').then(
         (m) => m.InventoryPageModule,
@@ -55,6 +62,7 @@ const routes: Routes = [
   {
     path: 'equipment',
     canActivate: [AuthGuard],
+    data: { title: 'Equipment' },
     loadChildren: () =>
       import('./pages/equipment/equipment.module').then(
         (m) => m.EquipmentPageModule,
@@ -63,6 +71,7 @@ const routes: Routes = [
   {
     path: 'collections',
     canActivate: [AuthGuard],
+    data: { title: 'Collections' },
     loadChildren: () =>
       import('./pages/collections/collections.module').then(
         (m) => m.CollectionsPageModule,

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { filter, map } from 'rxjs/operators';
 
 interface IMenuItem {
   title: string;
@@ -48,5 +51,34 @@ export class AppComponent {
     },
   ];
 
-  constructor() {}
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private titleService: Title,
+  ) {
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        map(() => {
+          let child = this.activatedRoute.firstChild;
+          while (child) {
+            if (child.firstChild) {
+              child = child.firstChild;
+            } else if (child.snapshot.data && child.snapshot.data['title']) {
+              return child.snapshot.data['title'];
+            } else {
+              return null;
+            }
+          }
+          return null;
+        }),
+      )
+      .subscribe((data: any) => {
+        if (data) {
+          this.titleService.setTitle(`${data} | AtEoAT`);
+        } else {
+          this.titleService.setTitle('After the End of All Things');
+        }
+      });
+  }
 }