How to get current route custom data in angular 2?

Question

I have set up routes is like below

const appRoutes: Routes = [
  {
    path: \'login\',
    component: LoginComponent,
    data: {
      title: \'Login TTX\         


        

Answer 1

For those that are now using Angular 6+ and latest RXJS 6 here is something based on the ansers above:

Routing example:

const routes: Routes = [
  {path: 'home', component: HomeComponent, data: {title: 'Home'}},
  // {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'login', component: LoginComponent, data: {title: 'Login'}},
  {path: 'dashboard', component: DashboardComponent, data: {title: 'Dashboard'}, canActivate: [AppAuthGuard]},
  {path: 'eventDetails', component: EventCardComponent, data: {title: 'Details'}},
  {path: '**', redirectTo: 'home', pathMatch: 'full'},
];

How to get the title example:

ngOnInit() {
    this.routerEventSubscription = this.router.events
      .pipe(filter(event => event instanceof RoutesRecognized))
      .pipe(map((event: RoutesRecognized) => {
        return event.state.root.firstChild.data['title'];
      })).subscribe(title => {
        this.title = title;
      });
  }

Answer 2

You can subscribe to ActivatedRoute.data. This is somehow similar to the answer from @dinesh-kumar, but I believe (activatedRoute.data as any).value is quite a hack taking advantage of the fact, that activatedRoute.data is implemented as a BehaviorSubject. But the ActivatedRoute.data is exposed as Observable<Data>, so the correct way would be to subscribe (don't forget to unsubscribe, or take(1) etc.) or use async pipe etc.

constructor(private route: ActivatedRoute) {
    this.route.data.subscribe((data) => {
      console.log(data);
    });
}

Answer 3

if you want to have current route data, can get it from ActivatedRoute

public constructor(private activatedRoute:ActivatedRoute) {
    console.log((activatedRoute.data as any).value);
}

Answer 4

this.router.events.subscribe((event: any) => {
        this.pageTitle = this.titleService.getTitle();
        // check instanceof  ChildActivationEnd  || ChildActivationStart
        if (event instanceof ChildActivationStart) {
            let pageIcon = event.snapshot?.firstChild?.children[0]?.data['icon'];
            this.pageIcon = pageIcon ? pageIcon : this.pageIcon;
        }
    })

Answer 5

For Angular 4+

If you place the following code in the parent or upper level components like AppComponent then it won't work. It only works on child or lower level components for which you've defined the route custom data:

 public constructor(private route:ActivatedRoute, private router:Router) {
      console.log(route.snapshot.data['title']);
  }

So, if you want to access the route custom data globally from a parent or upper level component to access the change in the route custom data then you've to listen to router events particularly RoutesRecognized or NavigationEnd events. I'm gonna show two procedures with AppComponent with two events:

First Approach:

   export class AppComponent implements OnInit, AfterViewInit {

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

    ngOnInit() {
         this.router
        .events
        .filter(event => event instanceof NavigationEnd)
        .map(() => {
          let child = this.activatedRoute.firstChild;
          while (child) {
            if (child.firstChild) {
              child = child.firstChild;
            } else if (child.snapshot.data && child.snapshot.data['custom_data']) {
              return child.snapshot.data['custom_data'];
            } else {
              return null;
            }
          }
          return null;
        }).subscribe( (customData: any) => {
          console.log(customData);
       });
    }
 }

Second Approach is using:

this.router.events
.filter(event => event instanceof RoutesRecognized)
.map( (event: RoutesRecognized) => {
    return event.state.root.firstChild.data['custom_data'];
})
.subscribe(customData => {
    console.log(customData);
});

Note: Even though last one is shorter and usually works, but, if you have nested routes then it is encouraged to use the first one.