title: Angular: How to access ActivatedRoute snapshot data from another component
body: <p>I am using the Angular2 <a href="https://material.angular.io/components/component/toolbar" rel="nofollow noreferrer">Material Toolbar</a> and I want to pass the current page title to it.</p>
  
  <p>My <strong>app.component</strong> has a header component and the current page component:</p>
  
  <pre><code>@Component({
    selector: 'mi-root',
    template: `
       &lt;mi-header&gt;&lt;/mi-header&gt;
       &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  
  export class AppComponent {
    constructor() {}
  }
  </code></pre>
  
  <p>In my <strong>app.routing</strong> I have a routing object with custom <code>title</code> property:</p>
  
  <pre><code>const APP_ROUTES: Routes = [
    {
      path: '',
      component: HomeComponent,
      data: {
        title: 'Home'
      }
    }, {
      path: 'settings',
      component: SettingsComponent,
      data: {
        title: 'Settings'
      }
    }
  ];
  </code></pre>
  
  <p>Now I want to access the <code>data.title</code> property from my <strong>header.component</strong> but unfortunately it is undefined. My <code>data</code> object is empty:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute} from '@angular/router';
  
  @Component({
    selector: 'mi-header',
    template: `
      &lt;md-toolbar color="primary"&gt;
        &lt;span class="u-ml"&gt;{{title}}&lt;/span&gt;
      &lt;/md-toolbar&gt;
    `,
    styles: []
  })
  
  export class HeaderComponent implements OnInit {
    title: string;
  
    constructor(private route: ActivatedRoute) {
      this.title = this.route.snapshot.data['title'];
    }
  }
  </code></pre>
  
  <p>If I try to access the same property with the same way but from the <code>HomeComponent</code> or <code>SettingsComponent</code> it works fine:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'mi-settings',
    template: `
      &lt;h1&gt;Welcome to {{title}} screen&lt;/h1&gt;
    `,
    styles: []
  })
  
  export class SettingsComponent {
    title: string;
  
    constructor(private route: ActivatedRoute) {
     this.title = route.snapshot.data['title'];
    }
  }
  </code></pre>
  
  <p>So, how can I access the <code>route.snapshot.data['title']</code> from my <code>HeaderComponent</code> ?</p>