How listen to route state changes and read data attribute

Question

I have different routes(nested as well with children) which should when they are navigated to, change the document.title and the title of the navigation which displays the header.

As I learned I can set the document.title via the TitleService from Angular2.

Best way would be that I can either grab the title from the router data property or fetch this from the attached component.

I tried to listen to subscribe to router.events but the events are not delivering me the needed information.

Example code:

 {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
  {
    path: '',
    component: IndexComponent
    children: [
      { path: 'componentA', component: ComponentA, data: { title: 'ComponentA'} },
      { path: 'componentB', component: ComponentB },
      { path: 'componentC', loadChildren: '../cc.module#CModule'}
    ]
  },
  { path: 'login', component: LoginComponent }

I added a plunker here: http://plnkr.co/edit/V35Njf49TY40Y8f1ChxR?p=preview

This plunker shows that there is different data set for 1) the parent route/component and 2) the child route/component.

How can I read the data in my parent component(or any other more central component/service) without implementing the activeRoute in each of my child components?

http://stackoverflow.com/questions/33520043/how-to-detect-route-change-in-angular-2/38080657#38080657 shows how you can detect route changes. You can use route `data` to configure a title for routes and read them from the routes like shown in http://stackoverflow.com/questions/36835123/how-do-i-pass-data-in-angular-2-components-while-using-routing/36835156#36835156 — Günter Zöchbauer, Sep 02 '16 at 12:29
Correct, but I can't read any information from the data attribute. — Gambo, Sep 02 '16 at 12:30
Please edit your question and add the code that shows what you have tried, where you failed and if applicable the error messages. — Günter Zöchbauer, Sep 02 '16 at 12:38
Seems my answer from http://stackoverflow.com/questions/38644314/changing-the-page-title-using-the-angular-2-new-router/38652281#38652281 is still working http://plnkr.co/edit/X7EvsrSf9J3amwguaYx3?p=preview — Günter Zöchbauer, Sep 02 '16 at 13:38

How listen to route state changes and read data attribute

0 Answers0