Changing the page title using the Angular 2 new router [duplicate]

Question

What's the right way to change the app page title in browser when using the new router?

*Using Angular 2 CLI

Answer 1

The title can be set using the Title service

To get the title from the current route the data property could be used.

Plunker example

const routes: RouterConfig = [     {         path: '',         redirectTo: '/login',         pathMatch: 'full',     },     {         path: 'login',         component: LoginComponent,         data: {title: 'Login'}     },     {         path: 'home',         component: HomeComponent,         data: {title: 'Home'}     },     {         path: 'wepays',         component: WePaysComponent,         data: {title: 'WePays'}     } ]; 

export class AppComponent {    constructor(titleService: Title, router: Router) {     router.events.subscribe(event => {       if(event instanceof NavigationEnd) {         var title = this.getTitle(router.routerState, router.routerState.root).join('-');         console.log('title', title);         titleService.setTitle(title);       }     });   }    // collect that title data properties from all child routes   // there might be a better way but this worked for me   getTitle(state, parent) {     var data = [];     if(parent && parent.snapshot.data && parent.snapshot.data.title) {       data.push(parent.snapshot.data.title);     }      if(state && parent) {       data.push(... this.getTitle(state, state.firstChild(parent)));     }     return data;   } } 

Just found https://github.com/angular/angular/issues/9662#issuecomment-229034288 where a similar approach is demonstrated.

I also found https://toddmotto.com/dynamic-page-titles-angular-2-router-events with bit a more beautiful code.

Answer 2

Following code (taken from: https://toddmotto.com/dynamic-page-titles-angular-2-router-events) works like a charm:

const routes: Routes = [{   path: 'calendar',   component: CalendarComponent,   children: [     { path: '', redirectTo: 'new', pathMatch: 'full' },     { path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } },     { path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } },     { path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } }   ] }]; 

and then the AppComponent

import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/mergeMap';  import { Component, OnInit } from '@angular/core'; import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; import { Title } from '@angular/platform-browser';  @Component({...}) export class AppComponent implements OnInit {   constructor(     private router: Router,     private activatedRoute: ActivatedRoute,     private titleService: Title   ) {}   ngOnInit() {     this.router.events       .filter(event => event instanceof NavigationEnd)       .map(() => this.activatedRoute)       .map(route => {         while (route.firstChild) route = route.firstChild;         return route;       })       .filter(route => route.outlet === 'primary')       .mergeMap(route => route.data)       .subscribe((event) => this.titleService.setTitle(event['title']));   } }