Weekly Webtips
Published in

Weekly Webtips

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.


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


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.



Explore the world of web technologies through a series of tutorials

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yurii K

Full-stack developer. In my work, I use Angular and C#. In my free time I write articles for my blog.