How to get data from Route or ActivatedRoute when subscribing to router.events.subscribe in Angular2?

angular redirect to route
angular/router events
angular route data
routerlink angular
angular/router navigate with params
router-outlet in angular
angular get current route
activatedroute vs routerstate

I'm trying to get the data from a Router whenever the Route changes but I'm not having success. Here I set the asdf property

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    OverviewComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: '' },
      { component: LoginComponent, path: 'login' },
      {
        children: [
          { path: '', pathMatch: 'full', redirectTo: 'overview', data: { asdf: 'hello' } },
          { component: OverviewComponent, path: 'overview', data: { asdf: 'hello' } },
        ], component: DashboardComponent,
        path: '',
      },
    ]),
  ],
})
export class AppModule { }

And here I can get the URL from the router when the route changes but asdf is undefined :(

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute, NavigationEnd } from '@angular/router';
@Component({
  selector: 'cs-map',
  styleUrls: ['map.component.css'],
  templateUrl: 'map.component.html',
})
export class MapComponent implements OnInit {
  private routerSub;

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

  public ngOnInit() {
    this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
        let url = val.url;
        console.log(this.activatedRoute.snapshot.data['asdf']); // data is defined but asdf is not :(
      }
    });
  }
}

How can I get asdf's value?

Edit: I'm navigating to /overview


Without while loop

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

 this.router.events
        .filter(event => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map(route => route.firstChild)
        .switchMap(route => route.data)
        .map(data => data['asdf'])
}

Router's ActivatedRoute `data` returns empty {} if module is lazy , A subscription on ActivatedRoute's data parameter outputs empty {} if the module is lazy. forRoot(routes) ], exports: [ RouterModule ] }) export class AppRouting {} #12767 have children array in the routing and issue is resolved with this.​router .events .filter(e => e instanceof NavigationEnd) .map(()  By returning a new Object into our stream (this.activatedRoute) we essentially swap what we’re observing - so at this point we are only running the .map() should the filter() successfully return us the event type of NavigationEnd.


The following is updated to work with rxjs v6

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

   this.router.events
        .pipe(
         filter(event => event instanceof NavigationEnd),
         map(() => this.activatedRoute),
         map(route => route.firstChild),
         switchMap(route => route.data),
         map(data => data['asdf']))
}

ActivatedRoute, Get Data from a Server To use the Angular router, an app needs to have at least two components so that it can navigate from Import RouterModule and Routes into your routing module. Import ActivatedRoute and ParamMap to your component. queryParams.subscribe(params => { this.name = params['name']; }); }. If I navigate to /parent/child2 and then look at the ActivatedRoute from parentComp, data.foo is defined, but data.bar is not. I have access to an array of all the children, but I don't know which one is activated. How can I access the activated child route's data from a parent route's component?


In-app navigation with routing, Note: we're using the AppComponent because it's the root component, therefore will always be subscribing to all route changes. To subscribe to  Do I have to unsubscribe from ActivatedRoute (e.g. params) observables? How would then work the subscription to changed route params? Observing data changes


data in the routes must be an array of objects rather than just object so define them like this

{ component: LoginComponent, path: 'login', data:[{myKey1: myValue1}] },

Now to retrieve it use this code in your components constructor

constructor(private router:Router, private activeRoute:ActivatedRoute) {

  router.events
    .filter(event => event instanceof NavigationEnd)
    .map(_ => this.router.routerState.root)
    .map(route => {
      while (route.firstChild) route = route.firstChild;
      return route;
    })
  .flatMap(route => route.data)
  .subscribe(data => {
    console.log(data[0].myKey1);

    });

}

Dynamic page titles in Angular 2 with router events, For example by clicking on a refresh button or a route navigation item We subscribe to our filtered router event stream and fetch the data. fetch the data because our routed component and its subscription are still alive. Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.


Angular: Refetch data on same URL navigation, angular 2 router.events subscription not firing - angular. queryParams.page; // call service get data this.sub = this.router.events.pipe( filter((event) => event  “Router” module in @angular/core can give the current url. “this.router.url “ will give the currnent url excluding host name (localhost or domain). Eg /home/page


angular 2 router.events subscription not firing - angular - html, In Angular 2 detecting this route change is relatively simple. If we have a component that is transient across all routes in our application then we In this example I've got a Top-Nav component which has subscribed to route changes so subscribe to events import { Router } from "@angular/router"; @Component​({ selector:  A subscription on ActivatedRoute's data parameter outputs empty {} if the module is lazy. Expected behavior. this.route.data.subscribe((data) => console.log(data)); must output route's data object. Minimal reproduction of the problem with instructions. app.routing.ts:


Angular Detecting Route Changes Within Your Application , It is quite common to have both the query and route parameters in any find out how to read any route/query parameters in your Angular 2+ application. import { ActivatedRoute } from '@angular/router'; @Component({ Reading via Subscriptions activeRoute.params.subscribe(routeParams => { this. ActivatedRoute provides access to the url, params, data, queryParams, and fragment observables. We will look at each of them in detail, but first let’s examine the relationships between them. URL changes are the source of any changes in a route. And it has to be this way as the user has the ability to modify the location directly.