Angular Pass Data to Route: Dynamic/Static

The Angular allows us to pass data to the route. The data can be static or dynamic. The static data use the Angular route data property, where you can store arbitrary data associated with this specific route. For to pass dynamic data (or an object), we can make use of the history state object. The Routed Component can then retrieve the dynamic data from the history state object.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Various ways of passing data to route

The Angular can pass data to Route in several ways.

  1. Using URL or Route Parameter
  2. The Optional Parameter or Query Strings
  3. Using URL Fragment
  4. Static data using the data property
  5. Dynamic data using state object


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Passing static data to a route

We can configure the static data at the time of defining the route. This is done by using the Angular route data property of the route. The route data property can contain an array of arbitrary string key-value pairs. You can use the static data to store items such as page titles, breadcrumb text, and other read-only, static data

For Example, consider the following route with the data property set

The Angular Router will pass the { id:'1', name:"Angular"} when the StaticComponent is rendered. The data value will be located in the data property of the ActivatedRoute service

We can then read the data by subscribing to the activatedroute.data property as shown below

Passing Dynamic data to a Route

The option to pass the dynamic data or a user-defined object was added in the Angular Version 7.2 using the state object. The state object is stored in History API

Providing the State value

The state can be provided in two ways

Using routerLink directive

Using navigateByUrl

The Router will add a navigationId property to the state object. Hence you cannot use a scalar value.

Accessing the state value

The state can be accessed by using the getCurrentNavigation method of the router (works only in the constructor)

Or use the history.state in the ngOnInit.

or use the getState method of the Location Service. This method is available Angular 8+

Passing Data to the Routes Example

Let us build a simple project to demonstrate how to pass data to the route

Passing static data example

The static component gets the static data configured in the route. It subscribes the activatedroute.data property to get the product data as shown above.

Passing dynamic data (or object) example

The Dynamic Component gets dynamic data. We use the history.state to access the product data. Alternatively, we can use the this.router.getCurrentNavigation().extras.state to achieve the same. Please remember getCurrentNavigation only works in the constructor. It will return null if used elsewhere.

home.component.ts

In HomeComponent, we have used routerLink & navigateByUrl to pass the data to the dynamic component. You can also use the form fields to change the data, before passing it to the dynamic route.

app.routes.ts

Here the static data is set for StaticComponent using the data property.

app.component.ts

app.module.ts

Angular pass data to route

References

History API

9 thoughts on “Angular Pass Data to Route: Dynamic/Static”

  1. Thank you for your efforts, though i’m having an issue as i’m trying to modify the passed object, when i modify it the changes don’t get reflected on the original object

  2. Can anybody confirm if passing dynamic data to a routed component still works in Angular 10? I cannot make it work.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top