How to get Route data into App Component in Angular 2

Try to filter and loop your events instead of subscribe

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

Please check the following working demo: https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info

If you had statically routed using Router object like below:

{
  path: '',
  pathMatch: 'full',
  component: NameComponent,
  data: { variableName: 'variableValue' }
},

On ngOnInit() you can use ActivatedRoute object to recover the data you passed from Router definition:

ngOnInit() {
  this.localVariable = this.route.snapshot.data['variableName'];
}

Obs: I am using Angular 5!

This code was written by Todd Motto (Google Developer Expert) to access route data in a parent component or app component. Works like a gem.

import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'
import { filter, map, mergeMap } from 'rxjs/operators'

constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(() => this.route),
    map(route => {
      while (route.firstChild) route = route.firstChild
      return route
    }),
    filter(route => route.outlet === 'primary'),
    mergeMap(route => route.data)
  ).subscribe(data =>
    console.log('data', data)
  )
}

See: https://ultimatecourses.com/blog/dynamic-page-titles-angular-2-router-events

In his example he is using route data to set the page title in app component.

Why accessing route data in a parent is so complicated I'll never know!