Is it possible to pass dynamic data into an Angular routing module?

Question

I have to pass data to a route (Angular v12.0.1):

// my-module-routing.module.ts
const routes: Routes = [
  { path: '', component: MyComponent, data: { key: '-> THIS HAVE TO BE DYNAMIC <-' } }
]

This dynamic data have to be passed through the call of the component, can be in HTML with RouterLink, or in TS with navigateWithHistory(), but what have to change is the data inside Route.

I don't know if this is possible, if isn't, is there alternatives?

Answer 1

You can use resolvers to load dynamic data. The Angular documentation has a good example showing how to fetch data from a service, but you can return any data.

Then you can get the data inside the component this way:

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
    this.data = this.route.snapshot.data;
}

Important to notice that the code on the resolver is going to run before the component is loaded.