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 cli.

Answer 1

You can to use @angular/plateform-browser to use the setTitle():

import { Title } from '@angular/platform-browser';  @Component({   selector: 'your-component', })  export class YourComponent implements onInit {   constructor(private title: Title) {}   ngOnInit() {      this.title.setTitle('Title for this component');  }  } 

Answer 2

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: `     <div>       Hello world!     </div>   ` }) 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);         }); }