Best use of NavigationExtras in Angular 7 plus
By: Coding In Depth
Tags: JavaScript, Angular, Router, Components, Web Development

Import Router and ActivateRouter in the app component. In the template create two navigation state product lists and product details. The product list is the root component and the product details are another component where we route and pass the state based on navigation.

Write the below code to grab the state in ngOnInit method. The below line of code returns the current state.

ngOnInit() { this.appstate$ = this.router.events.pipe( filter(e => e instanceof NavigationStart), map(() => { const currentState = this.router.getCurrentNavigation(); return currentState.extras.state; }) ); }

Below is the template of the app component. Here we are iterating appstate$ using async pipe.

However, on the click of product details, we are creating an instance of NavigationExtras. NavigationExtras accept queryparam which is the data we are passing from one component to another. Check the below code for complete details.

Apart from query param, NavigationExtras provide a bunch of other methods:

fragment: Sets hash fragment.

skipLocationChange: When true, navigates without pushing a new state into history.

queryParams: Very useful parameter to send complex objects using route navigation.

NavigationExtras provide a bunch of other methods that are useful when there are child routes. Check in the official documentation.

Get NavigationExtras Object

We have set the NavigationExtras object in the app component. Now we can retrieve it in the product details component. There are two ways to retrieve it:

Using getCurrentNavigation Method: Import Router module in the product details component. Inject in the contractor and this.router.getCurrentNavigation() will grab the extras state .

constructor(public route: ActivatedRoute,private router: Router) { this.detailProduct = this.router.getCurrentNavigation().extras.state; console.log(this.detailProduct.productdetails); }

And below is the output.

2. From Window History: The other way to retrieve the NavigationExtras object from windows history object. The window.history provides an object of the browser session. Using this object we can retrieve the object set in the state. So window.history.state.productdetails.queryParams will provide product details object selected in the app component. Check below code snippet in ngOnInit() method.

ngOnInit() { this.currentState$ = this.route.paramMap.pipe( map(() => window.history.state.productdetails.queryParams) ); }

The product details template is below code.

<h1>State in Value Product details component</h1> <pre>{{ currentState$ | async | json }}</pre>

Check the below state passed on the click of the product list.

The following state is setting on the click of product details.

Summary

After the release of Angular 7.2, Navigation extras provide a very simplistic way to maintain state. Also, NavigationExtras is very helpful in passing complex objects from one component to another using route state. We have discussed and create a demo app that passes the instance of NavigationExtras from product list to product details component. Also, NavigationExtras is very helpful in the case of multiple child routing components.