How to change title of a page using angular(angular 2 or 4) route?

Question

I want to change the title of the page whenever I click or browse the link from the URL bar. How to change that using Angular route? I am using angular version 4 and angular

Answer 1

you have to pass "title" as data to your route

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' } }
  ]
}];

Then do this imports in your Component:

import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

Once imported, we can inject them both:

@Component({
  selector: 'app-root',
  templateUrl: `
    

      Hello world!
    
  `
})
export class AppComponent {
  constructor( private router: Router,
               private activatedRoute: ActivatedRoute,
               private titleService: Title) {}
}

To update a page title statically, we can simply call setTitle like so:

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) => {
            let title = 'Default Title Here'
            if(event['title']) {
                title = event['title'];
            }
            this.titleService.setTitle(title);
        });
}