title: Angular 2 Dynamic Breadcrumbs
body: <p>I need some help with breadcrumbs</p>
  
  <p>Here example routes config</p>
  
  <pre class="lang-js prettyprint-override"><code>Routes = [  
      {path: '', redirectTo: 'home', pathMatch: 'full'},  
      {path: 'home', ..., data: { breadcrumb: 'Home'}},  
      {path: 'about', ..., data: { breadcrumb: 'About'}},  
      {path: 'github', ..., data: { breadcrumb: 'GitHub'},
      {
         path: 'category/:id',
         component: CategoryComponent
      },  
  ]
  </code></pre>
  
  <p>In bread crumbs component i try to use this to extract breadcrumbs data from <code>ActivatedRoute</code></p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
     // subscribe to the NavigationEnd event
     this.router.events.filter((event) =&gt; event instanceof NavigationEnd).subscribe(() =&gt; {
  
        // set breadcrumbs
        const root: ActivatedRoute = this.activatedRoute.root;
        this.breadcrumbs = this.getBreadcrumbs(root);
     });
   }
  </code></pre>
  
  <p>After that i render comonentns template</p>
  
  <pre><code>&lt;ul class="breadcrumb"&gt;
     &lt;li&gt;&lt;a routerLink="" routerLinkActive="active"&gt;&lt;i class="fa fa-home position-left"&gt;&lt;/i&gt; Главная&lt;/a&gt;&lt;/li&gt;
     &lt;ng-container *ngFor="let breadcrumb of breadcrumbs"&gt;
     &lt;li routerLinkActive="active"&gt;
        &lt;a [routerLink]="[breadcrumb.url, breadcrumb.params]"&gt; {{ breadcrumb.label }}&lt;/a&gt;
     &lt;/li&gt;
     &lt;/ng-container&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>All fine but i dont know how i can pass data value from another component for <code>category/:id</code> route for make in human readable like "Mobile Phones"</p>