Breadcrumbs

src/app/administracion/administracion.routes.ts

@@ -16,16 +16,16 @@ const routes: Routes = [{
     path: '',
     component: AdministracionComponent,
     children: [
-        { path: 'agencias', component: AgenciasComponent },
-        { path: 'avanzado', component: AvanzadoComponent },
-        { path: 'contactenos', component: ContactenosComponent },
-        { path: 'dashboard', component: DashboardComponent },
-        { path: 'galeria', component: GaleriaComponent },
-        { path: 'internacional', component: InternacionalComponent },
-        { path: 'portafolio', component: PortafolioComponent },
-        { path: 'certificados', component: CertificadosComponent },
+        { path: 'agencias', component: AgenciasComponent, data: { titulo: 'Agencias' } },
+        { path: 'avanzado', component: AvanzadoComponent, data: { titulo: 'Cursos Avanzados' } },
+        { path: 'contactenos', component: ContactenosComponent, data: { titulo: 'Contactenos' } },
+        { path: 'dashboard', component: DashboardComponent, data: {titulo: 'Dashboard'} },
+        { path: 'galeria', component: GaleriaComponent, data: { titulo: 'Galeria' } },
+        { path: 'internacional', component: InternacionalComponent, data: { titulo: 'Cursos Internacionales' } },
+        { path: 'portafolio', component: PortafolioComponent, data: { titulo: 'Portafolio' } },
+        { path: 'certificados', component: CertificadosComponent, data: { titulo: 'Certificados' } },
         { path: 'certificado', component: CertificadoComponent },
-        { path: 'account-settings', component: AccountSettingsComponent}
+        { path: 'account-settings', component: AccountSettingsComponent, data: { titulo: 'Ajustes del tema' }}
     ]
 }];
 

src/app/shared/breadcrumbs/breadcrumbs.component.html

@@ -3,15 +3,15 @@
 <!-- ============================================================== -->
 <div class="row page-titles">
     <div class="col-md-5 align-self-center">
-        <h3 class="text-themecolor">Blank Page</h3>
+        <h3 class="text-themecolor">{{titulo}}</h3>
     </div>
     <div class="col-md-7 align-self-center">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="javascript:void(0)">Home</a>
             </li>
-            <li class="breadcrumb-item">pages</li>
-            <li class="breadcrumb-item active">Blank Page</li>
+            <li class="breadcrumb-item">Administración</li>
+            <li class="breadcrumb-item active">{{titulo}}</li>
         </ol>
     </div>
 </div>

src/app/shared/breadcrumbs/breadcrumbs.component.ts

@@ -1,15 +1,37 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, ActivationEnd } from '@angular/router';
+import { filter, map } from 'rxjs/operators';
+import { Title, Meta, MetaDefinition } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
   styles: []
 })
 export class BreadcrumbsComponent implements OnInit {
+  titulo: string;
 
-  constructor() { }
+  constructor(private router: Router, private title: Title, private meta: Meta) {
+    this.obtenerDataRoute().subscribe(data => {
+      this.titulo = data.titulo;
+      this.title.setTitle(this.titulo);
+      const metaTag: MetaDefinition = {
+        name: 'description',
+        content: this.titulo
+      };
+      this.meta.updateTag(metaTag);
+    });
+  }
 
   ngOnInit() {
   }
 
+  obtenerDataRoute() {
+    return this.router.events.pipe(
+      filter(evento => evento instanceof ActivationEnd),
+      filter((evento: ActivationEnd) => evento.snapshot.firstChild == null),
+      map((evento: ActivationEnd) => evento.snapshot.data)
+    );
+  }
+
 }

src/app/shared/sidebar/sidebar.component.html

@@ -17,7 +17,7 @@
                     </ul>
                 </li>
                 <li class="nav-devider"></li>
-                <li class="nav-small-cap">PERSONAL</li>
+                <li class="nav-small-cap">ADMINISTRACIÓN</li>
                 <li *ngFor="let menu of sidebar.menu"> <a class="has-arrow waves-effect waves-dark" aria-expanded="false"><i
                             [class]="menu.icono"></i><span class="hide-menu">{{menu.titulo}} <span
                                 class="label label-rouded label-themecolor pull-right">{{menu.submenu.length}}</span></span></a>