Angular 2: How to access ActivatedRoute snapshot data from another component

Question

I am using the Angular2 Material Toolbar and I want to give it the current page title.

My app.component has a header component and the current page component:

@Component({ selector: 'mi-root', template: ` <mi-header></mi-header> <router-outlet></router-outlet> ` }) export class AppComponent { constructor() {} } 

In my app.routing , I have a routing object with a custom property called title :

 const APP_ROUTES: Routes = [ { path: '', component: HomeComponent, data: { title: 'Home' } }, { path: 'settings', component: SettingsComponent, data: { title: 'Settings' } } ]; 

Now I want to access the data.title property from my header.component , but unfortunately it is undefined. My data object is empty:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute} from '@angular/router'; @Component({ selector: 'mi-header', template: ` <md-toolbar color="primary"> <span class="u-ml">{{title}}</span> </md-toolbar> `, styles: [] }) export class HeaderComponent implements OnInit { title: string; constructor(private route: ActivatedRoute) { this.title = this.route.snapshot.data['title']; } } 

If I try to get the same property, but from HomeComponent or SettingsComponent it works fine:

 import { Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'mi-settings', template: ` <h1>Welcome to {{title}} screen</h1> `, styles: [] }) export class SettingsComponent { title: string; constructor(private route: ActivatedRoute) { this.title = route.snapshot.data['title']; } } 

So, how can I access route.snapshot.data['title'] from my HeaderComponent ?

Answer 1

  constructor(router:Router, route:ActivatedRoute) { router.events .filter(e => e instanceof NavigationEnd) .forEach(e => { console.log('title', route.root.firstChild.snapshot.data.title); } } 

Plunger example