Dynamic route data in angular

Question

I'd like to know if it's possible to dynamically change the current route's data (using angular 6)

I've got the following route config

 {
    path: 'collections', component: CollectionListComponent, data: {title: "List of collections"},
    children:
      [
        {
          path: ':collectionId', component: CollectionDetailsComponent, data: {title: "Collection details"},
        }
      ]
  }

I've got a header component that listens to routing events and retrieves the data to display the title.

   this.router.events.pipe(
      filter(e => e instanceof NavigationEnd))
      .forEach(e => {
        if(e instanceof NavigationEnd)
        {

          let r = route.firstChild;
          while(r.firstChild)
          {
            r = r.firstChild;
          }
          this.title= r.snapshot.data['title'];
        }

      });

Now, instead of displaying a static title when I'm on the CollectionDetails component, I'd like to display a dynamic one, e.g. "Collection [collectionName] details".

Is it possible to achieve this using route data?

I know I can do it using a service that broadcasts the dynamic header, but I'd like to know if there is a better way.

there is no way to set dynamic data for routs because routs is like a config for pages and it's set before all components renders. — Fateme Fazli, Jun 12 '18 at 08:07

score 3 · Accepted Answer · answered Jun 12 '18 at 14:47

3

You can use a resolver like described here: https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

I created a stackblitz to show https://stackblitz.com/edit/angular-route-data

When your application becomes bigger and you need to share more and more data between components I would recommmend using a state management library like ngrx or ngxs. I recently switched from ngrx to ngxs because it needs less boilerplate code

answered Jun 12 '18 at 14:47

Marcel Hoekstra

1,334
12
19

state management tools like ngrx and so are not needed in angular. they overcomplicate things, change whole angular architecture and make the whole framework useless. always use angular ways to manage state unless you have a special reason. component lifecycles, dynamic router data, router state, shared services, observables... use http caching if you need. but never use ngrx, for the same reasons why you should never use jquery. – aycanadal Apr 13 '21 at 11:00
"Services are ideal for sharing stateful in-memory data." from https://angular.io/guide/styleguide – aycanadal Apr 13 '21 at 14:50

score 1 · Answer 2 · answered Jul 02 '19 at 06:41

If you are using angular 7.2 and above you can use state to pass data objects dynamically without showing in url.

this.router.navigate(['/some-route'], {state: {data: {...}}});

then you can read state like:

ngOnInit() {
    this.state = this.activatedRoute.paramMap
        .pipe(map(() => window.history.state));}

score 0 · Answer 3 · answered Jun 13 '18 at 00:02

I wrote a library for this exact kind of thing. Store data in the cache and access it from the other page. It is much easier to use, reason about and setup than ngrx. Take a look at ngx-rxcache.

https://github.com/adriandavidbrand/ngx-rxcache

It is a Behaviour Subject based lightweight cache that you can use to cache your data with in only a few lines of code rather than the ridiculous amount of boiler plate code required by ngrx.

This library was born out of dislike for ngrx and after having used it for the last few weeks I am confident that it is ready for other people to start using as well.

Check it out.

score 0 · Answer 4 · answered Dec 02 '18 at 02:15

Since you are trying to make the data for the children dynamic, you can late-bind the children to the router. A similar question was asked here: Modify data object in ActivatedRoute.

I've posted an answer there which discusses how you can bind the array of children to the router in the constructor of the root component, which in your case would be CollectionListComponent by calling activatedRoute.routeConfig.children = routes;. Since that is in the constructor, you have all sorts of options for manipulating the routing information before it gets bound to the router.

Dynamic route data in angular

4 Answers4