Título navbar - Miga de pan

src/app/app.routes.ts

@@ -11,18 +11,18 @@ import { UnidadInformacionComponent } from './pages/unidad-informacion/unidad-in
 
 export const routes: Routes = [
     { path: 'login', component: LoginComponent },
-  
+
     {
       path: '',
       component: LayoutComponent,
       children: [
         { path: '', redirectTo: 'inicio', pathMatch: 'full' },
-        { path: 'inicio', component: HomeComponent },
-        { path: 'unidad-concesiones', component: ConcesionesComponent },
-        { path: 'ct-actualizacion', component: ActualizacionPdComponent },
-        { path: 'ct-ajuste', component: AjustePdComponent },
-        { path: 'resumen', component: ResumenComponent },
-        { path: 'unidad-informacion', component: UnidadInformacionComponent },
+        { path: 'inicio', component: HomeComponent, data: { title: 'Inicio' } },
+        { path: 'unidad-concesiones', component: ConcesionesComponent, data: { title: 'Unidad de Concesiones' } },
+        { path: 'ct-actualizacion', component: ActualizacionPdComponent, data: { title: 'Cronograma temporal por actualización de PD' } },
+        { path: 'ct-ajuste', component: AjustePdComponent , data: { title: 'Cronograma temporal por ajuste de PD' } },
+        { path: 'resumen', component: ResumenComponent, data: { title: 'Resumen' } },
+        { path: 'unidad-informacion', component: UnidadInformacionComponent, data: { title: 'Unidad de Información' } },
       ]
     },
     { path: '**', redirectTo: 'inicio' }

src/app/components/navbar/navbar.component.html

@@ -20,7 +20,7 @@
 
 <!-- Page title and breadcrumb -->
 <div class="page-header">
-  <div class="page-title">{{ pageTitle }}</div>
+  <div class="page-title tituloNavbar">{{ pageTitle }}</div>
   <div class="breadcrumb-container">
     <a routerLink="/dashboard" class="breadcrumb-link">Inicio</a>
     <span class="breadcrumb-separator">/</span>

src/app/components/navbar/navbar.component.ts

@@ -2,6 +2,8 @@ import { Component, EventEmitter, Output } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
 import { ConfirmationService } from 'primeng/api';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-navbar',
@@ -12,8 +14,23 @@ import { ConfirmationService } from 'primeng/api';
 })
 export class NavbarComponent {
   @Output() sidebarToggle = new EventEmitter<void>();
-  pageTitle: string = 'Starter Page';
-  constructor(private confirmationService: ConfirmationService) {}
+  pageTitle: string = 'Starter Pages';
+  constructor(private confirmationService: ConfirmationService,private router: Router, private activatedRoute: ActivatedRoute) {
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+      map(() => {
+        let route = this.activatedRoute;
+        while (route.firstChild) {
+          route = route.firstChild;
+        }
+        return route;
+      }),
+      mergeMap(route => route.data)
+    ).subscribe(data => {
+      this.pageTitle = data['title'] || 'Sin título';
+    });
+  }
+
 
   toggleSidebar() {
     this.sidebarToggle.emit();
@@ -36,6 +53,6 @@ export class NavbarComponent {
       }
     });
   }
-  
+
 
 }

src/styles.scss

@@ -47,8 +47,8 @@
     }
   }
 
-  .tituloTabla{
-    color: #002147;
+  .tituloTabla, .tituloNavbar {
+    color: #002147 !important;
   }
 
   .tablaAzul{