How To Handle Query Parameters In Router Link

Hello Friends, In this article, we will discuss on queryParamsHandling and how to pass current route link parameters in another route.

The query parameter is lost when the user navigates from one route to another route.

For Example, if a user navigates to the user page with route /user?pageNum=1 then he navigates to the user detail page, the angular removes the current route query parameter from the URL.

You can change this behavior by configuring the queryParamsHandling strategy.

It has three options:

1. queryParamsHandling: null
This is the default option. The angular removes the query parameter from the URL when the user navigating from one component to another component.

this.router.navigate(['user'], { queryParams: { pageNum: this.pageNo + 1 }, queryParamsHandling :null} );

<a [routerLink]="['user']" [queryParams]="{ pageNum:2 }">Page 2</a>

 

2. queryParamsHandling: preserve
The Angular preserves the query parameter of the current route to the next navigation route. if any query parameters of the next route than it is discarded

this.router.navigate(['user'], { queryParams: { pageNum: this.pageNo + 1 }, queryParamsHandling :"preserve"} );

<a [routerLink]="['user']" [queryParams]="{ pageNum:2 }" queryParamsHandling="preserve">Page 2</a>

 

3. queryParamsHandling: merge
The Angular merges the query parameters from the current route with the next route before navigating to the next route.

this.router.navigate(['user'], { queryParams: { pageNum: this.pageNo + 1 }, queryParamsHandling :"merge"} );

<a [routerLink]="['user']" [queryParams]="{ pageNum:2 }" queryParamsHandling="merge">Page 2</a>

I hope this article helps you and you will like it.