Using Query Parameters with Angular Router

Using Query Parameters with Angular Router

Introduction

When building applications, there might be scenarios where we want to pass in some arguments or parameters to describe the behavior of the route. In Angular, these are called query parameters, and they are optional. Query parameters should not be confused with regular route parameters that are required parameters and bound to one route only.

To clear the difference between route parameters and query parameters imagine that you are building an application that stores products. You can have a route that opens any specific product using product_id. You can also specify a query parameter: read_only. When the read_only is set to true, the user can only view the record, whereas when the read_only is false, the user can also edit the record. This way using just one route, both edit and view use cases can be handled. Here product_id is the route parameter and the read_only which is optional is the query parameter.

Prerequisites

To fully understand this article, familiarity with building applications using Angular is needed. Having experience with Angular Router, RouterLink and ActivatedRoute will also be helpful.

Passing Query Parameters with Router.navigate

If you are using Router.navigate to navigate across the routes, use queryParams to send the query parameters.

In the example above, if we want the visitors to see the list of products ordered by popularity we will use the code below:

Using this code, the URL will become:

However, there can be scenarios where we need to pass multiple parameters when navigating. For example, if we want to order the products by popularity and also by price, we can use the code below:

This time the URL will become the following:

This wraps how to set query parameters using queryParams.

Preventing Loss of Query Parameters Using queryParamsHandling

When navigating between routes, the parameters tend to get lost. Suppose if we pass an argument arg0 it will not be passed when subsequent routing happens. We can save the parameters using the queryParamsHandling and setting the value to preserve or merge.

In the above example, suppose we want to route the visitors to the brands page from the product with route parameter { order: 'popular' }, while keeping the route parameters. To do this, we can use the queryParamsHandling and set it to preserve :

This will make the URL to look like:

Next, let’s say we want to preserve the previous route’s query parameter { order: 'popular' }  while adding new parameters { price: 'high-to-low' }. We can set the queryParamsHandling to merge:

With the code above, the URL will become:

Here we conclude the preservation of query parameters using queryParamsHandling to preserve or merge.

Passing Query Parameters with RouterLink

Taking into consideration our previous link, if we want to use RouterLink directive to navigate, we will need to pass the query parameters using queryParams as below:

Notice how we pass in the object to the queryParams using the one-way binding. We can also pass a whole object as the queryParams .

Further, if we want to carry these query parameters forward on subsequent navigation, we can use the queryParamsHandling option. The possible options of queryParamsHandling are merge  and preserve:

Here, we have seen how to pass the queryParams and handling of the parameters using queryParamsHandling in RouterLink.

Reading Query Parameters Values

Until now we have learned how to pass the query parameters in the route. These parameters were optional and were used to communicate some information to the destination page. Sending the parameters is one part, but it’s also necessary to read the parameters out of the URL and use them.

In Angular, we read the route query parameters using the ActivatedRoute class. The ActivatedRoute has an observable property called queryParams to reveal the parameters of the current URL.

Suppose we are dealing with the following URL:

To access the query parameter order in the code, we use the code below:

Here in the console, we will see the value of the order query parameter value “popular” printed out. If we have multiple query parameters, we can use the queryParamMap property which returns an observable paramsMap object.

If we have the URL with multiple query parameters like:

We can access these query parameters using the below code:

Using the object spread operator here, we get the result below:

Finally, you should be able to understand how to access query parameters from the resulting routes.

Conclusion

In this tutorial, we looked at the difference between query parameters and route parameters. We also looked into how to pass the arguments across the routes as query parameters and also retrieve them back on the page using queryParams and queryParamsHandling with Router.navigate and RouterLink. We also learned how to handle queryParams and queryParamMap with ActivatedRoute.

Angular requires Javascript in its base. If you want to further your knowledge about Javascript, you can check out the following blogs:

Happy Computing!