title: Retrieving a data property on an Angular2 route regardless of the level of route nesting using ActivatedRoute
body: <p>I have defined a number of routes as follows:</p>
  
  <pre><code>export const AppRoutes: Routes = [
    {path: '', component: HomeComponent, data: {titleKey: 'homeTitle'}},
    {path: 'signup', component: SignupComponent, data: {titleKey: 'SIGNUP_FORM.TITLE'}},
    {path: 'signin', component: SigninComponent, data: {titleKey: 'SIGNIN_FORM.TITLE'}},
    {path: 'sendpasswordresetinformation', component: SendPasswordResetInformationComponent},
    {path: 'password/reset/:userAccountToken', component: PasswordResetComponent},
    {
      path: 'dashboard', component: DashboardComponent, children: [
      {path: '', component: DashboardSummaryComponent},
      {
        path: 'message', children: [
        {path: '', component: MessageSummaryComponent, data: {titleKey: 'MESSAGE_LIST.TITLE'}},
        {path: 'conversation/:otherId', component: MessageConversationComponent, data: {titleKey: 'XXX'}}]
      },
      {
        path: 'useraccount', component: UserAccountComponent, children: [
        {
          path: '',
          component: UserAccountSummaryComponent,
          data: {titleKey: 'XXX'},
          resolve: {
            userAccount: UserAccountResolve
          }
        },
        {path: 'address', component: UserAccountAddressComponent, data: {titleKey: 'ADDRESS_FORM.TITLE'}},
        {path: 'email', component: UserAccountEmailComponent, data: {titleKey: 'EMAIL_FORM.TITLE'}},
        {
          path: 'emailnotification',
          component: UserAccountEmailNotificationComponent,
          data: {titleKey: 'EMAIL_NOTIFICATION_FORM.TITLE'}
        },
        {path: 'firstname', component: UserAccountFirstNameComponent, data: {titleKey: 'FIRST_NAME_FORM.TITLE'}},
        {path: 'password', component: UserAccountPasswordComponent, data: {titleKey: 'PASSWORD_FORM.TITLE'}}]
      }]
    }];
  </code></pre>
  
  <p>Some of the routes are children of others.</p>
  
  <p>I would like to find a way to retrieve the <code>titleKey</code> property on <code>data</code> regardless of whether the route is a top level route or the child of another.</p>
  
  <p>Here is what I have tried:</p>
  
  <pre><code>export class AppComponent implements OnInit {
  
    constructor(private translate: TranslateService,
                private sessionService: SessionService,
                private titleService: Title,
                private activatedRoute: ActivatedRoute) {
      let userLang = 'fr';
      translate.use(userLang);
      moment.locale(userLang);
    }
  
    ngOnInit() {
      this.sessionService.reloadPersonalInfo();
    }
  
    setTitle($event) { 
      this.translate.get(this.activatedRoute.snapshot.data['titleKey'])
       .subscribe(translation=&gt;this.titleService.setTitle(translation));
    }
  }
  </code></pre>
  
  <p><code>this.activatedRoute.snapshot.data['titleKey']</code> is <code>undefined</code>.</p>
  
  <p>Can someone please advise how to retrieve a property on route <code>data</code> regardless of the level of nesting of the route?</p>
  
  <p><strong>edit</strong>: After reading the official <a href="https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html" rel="noreferrer">angular documentation about ActivatedRoute</a>, I tried to use the <code>map</code> operator on the data property of the <code>ActivatedRoute</code> instance as follows:</p>
  
  <pre><code>@Component({
    selector: 'app',
    template: `
                &lt;section class="container-fluid row Conteneur"&gt;
                   &lt;appNavbar&gt;&lt;/appNavbar&gt;
                   &lt;section class="container"&gt;
                      &lt;router-outlet (activate)="setTitle($event)"&gt;&lt;/router-outlet&gt;
                   &lt;/section&gt;
                &lt;/section&gt;
                &lt;section class="container-fluid"&gt;  
                  &lt;appFooter&gt;&lt;/appFooter&gt;
                &lt;/section&gt;
                `,
    directives: [NavbarComponent, FooterComponent, SigninComponent, HomeComponent, ROUTER_DIRECTIVES]
  })
  export class AppComponent implements OnInit {
  
    constructor(private translate: TranslateService,
                private sessionService: SessionService,
                private titleService: Title,
                private activatedRoute: ActivatedRoute) {
      let userLang = 'fr';
      translate.use(userLang);
      moment.locale(userLang);
    }
  
    ngOnInit() {
      this.sessionService.reloadPersonalInfo();
    }
  
    setTitle($event) {
      this.activatedRoute.data.map(data=&gt;data['titleKey'])
        .do(key=&gt;console.log(key))
        .switchMap(key=&gt;this.translate.get(key))
        .subscribe(translation=&gt;this.titleService.setTitle(translation));
    }
  }
  </code></pre>
  
  <p>and yet <code>key</code> is always undefined...</p>