QueryParamsHandling In Angular

The Code Points September 25, 2022 0

In this article, we will learn about the QueryParamsHandling and how to use current route link arguments in another route in angular application.

When the user switches from one route to another, the query parameter is lost.

For example, if a user navigates to the user page through route /user?pageNum=1 and subsequently to the user detail page, the current route query parameter is removed from the URL.

This behavior can be changed by specifying the queryParamsHandling strategy.

There are three options:

1. queryParamsHandling: null

This is the standard setting. When the user navigates from one component to another, angular removes the query parameter from the URL.

// Component

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

// HTML

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

2. queryParamsHandling: preserve

The query parameter of the current navigation route is carried over to the next navigation route by Angular. If any query parameters of the following route are found, they are discarded.

// Component

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

// HTML

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

3. queryParamsHandling: merge

Before proceeding to the next route, Angular blends the query parameters from the current route with the next route.

// Component

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

// HTML

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

Conclusion

In this article, we learned about the QueryParamsHandling and how to use current route link arguments in another route in angular application.

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

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.