title: Angular How to change navmenu header based on route
body: <p>I am working on a Dashboard layout in my current project with Angular 4+.</p>
  
  <p>When the user navigates between the different sections of the app I need the navmenu header title to update to reflect the current section of the app.</p>
  
  <p><a href="https://i.stack.imgur.com/Gn7EA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Gn7EA.png" alt="enter image description here"></a></p>
  
  <p>As an example when the user visits settings "Page Title" should change to "Settings"</p>
  
  <p><a href="https://i.stack.imgur.com/mQ6c5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mQ6c5.png" alt="enter image description here"></a></p>
  
  <p>The project is based on the .net core 2 Angular template
  Below is the code I have to makeup the app routing as well as the dashboard routing.</p>
  
  <p><strong>navigation.service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  @Injectable()
  export class NavigationService {
      private titleSource = new BehaviorSubject&lt;string&gt;("Page Title");
      currentTitle = this.titleSource.asObservable();
  
      constructor() {
      }
  
      changeTitle(title: string) {
          this.titleSource.next(title);
      }
  }
  </code></pre>
  
  <p><strong>app-routing.module</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { HomeComponent } from "./components/home/home.component";
  
  const appRoutes: Routes = [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: '**', redirectTo: 'home' }
  ]
  
  @NgModule({
      imports: [
          RouterModule.forRoot(appRoutes)],
      exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><strong>app.module.shared</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { AppRoutingModule } from './app-routing.module';
  import { DashboardModule } from "./components/dashboard/dashboard.module";
  
  import { UtilsModule } from "./components/shared/shared.module";
  //app components
  import { AppComponent } from './components/app/app.component';
  
  import { NavigationService } from "./services/navigation.service";
  
  @NgModule({
      declarations: [
          AppComponent,
  
      ],
      imports: [
          SharedModule,
          DashboardModule,
          AppRoutingModule,
          DevExtremeModule,
          CommonModule,
          HttpModule,
          FormsModule
      ],
      providers: [NavigationService]
  })
  export class AppModuleShared {
  }
  </code></pre>
  
  <p><strong>dashboard-routing.module</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { DashboardComponent } from "./dashboard.component";
  import { SettingsProfileComponent } from "./settings/settingsProfile/settings.profile.component";
  import { SettingsEmailComponent } from "./settings/settingsEmail/settings.email.component";
  import { UsersListComponent } from "./users/users.list.component";
  
  export const dashboardRoutes: Routes = [
      {
          path: 'dashboard',
          component: DashboardComponent,
          children: [{
              path: 'settings',
              data: { title: 'Settings' },
  
              children: [{
                  path: 'profile',
                  component: SettingsProfileComponent
              },
              {
                  path: 'email',
                  component: SettingsEmailComponent
              }]
          }, {
                  path: 'users',
                  data: { title: 'Users' },
                  children: [{
                      path: '',
                      component: UsersListComponent
                  }]
          }]
      }
  ];
  
  @NgModule({
      imports: [
          RouterModule.forChild(dashboardRoutes)
      ],
      exports: [RouterModule]
  })
  export class DashboardRoutingModule { }
  </code></pre>
  
  <p><strong>dashboard.module</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { UtilsModule } from "../shared/shared.module";
  
  import { DashboardRoutingModule } from "./dashboard-routing.module";
  
  import { DashboardComponent } from './dashboard.component';
  import { SettingsProfileComponent } from "./settings/settingsProfile/settings.profile.component";
  import { SettingsEmailComponent } from "./settings/settingsEmail/settings.email.component";
  import { UsersListComponent } from "./users/users.list.component";
  
  @NgModule({
      imports: [
          CommonModule,
          UtilsModule,
          DashboardRoutingModule
      ],
      declarations: [
          DashboardComponent,
          SettingsProfileComponent,
          SettingsEmailComponent,
          UsersListComponent,
      ],
      providers: []
  })
  export class DashboardModule {
  }
  </code></pre>
  
  <p>I am trying to avoid having a OnInit in each component. Is it possible to do this only in the routing? The project is early on so if there are any other recommendations on how to accomplish this we are open to change.</p>