Query parameters in Angular

In this article, I want to show you how to use query parameters in Angular. Angular allows us to use query parameters in HTML or TS.

RouterLink

If we want to use query parameters in HTML, we need a directive RouterLink.

Router

If we want to use query parameters in TS we need to inject Router in the constructor from angular/router.

The code in HTML and TS is doing the same thing.

Query Params Handling

Angular has a couple of ways to handle query parameters:

“” : Replace current parameters with new parameters. This is the default behavior.
“merge” : Merge new parameters with current parameters.
“preserve” : Preserve current parameters.

We can specify query handler behavior.

Get query parameters

To get query parameters we need to inject ActivatedRoute from angular/router in the constructor then in the constructor or in method ngOnInit, we must make a subscription where we get query parameters.

If you need to take a close look at the project here is the link.

Originally published at http://tomorrowmeannever.wordpress.com on July 19, 2022.