Router Query Parameters with Angular

The parameters for Query Parameter allow you to transfer optional parameter across any route in the application. It is to be noted that Query Parameters differ from regular routing parameters which are only available on a route and are not optional (eg: / customer /: id). Let us see how one can work with the query parameters:

Query Params With Router.navigate

In case someone navigates to the route for the purpose of using the Router.navigate, he/she needs to submit the demand parameters:

Doing this will result in the following URL:

http://localhost:4200/customers?order=popular

One can also specify multiple query parameters as given below:

Now the resulting URL looks like this:

http://localhost:4200/customers?order=popular&order-range=not-cheap

How to preserve or merge the Query Parameter with Query Paramedic Action?

Usually, the query parameters will be lost by default because of a later navigation action. In order to prevent this, one can set queryParamsHandling to either maintain or merge. Let us assume that we are on the customer route and we want to route the item to the item while keeping the query parameters:

Here, we can use merge instead of preserve if one wishes to send old query parameters to the item's route:

The resulting URL, in this case, looks like this:

http://localhost:4200/items?order=popular&filter=old

One needs to keep in mind that conservation of query parameters was used with preserveQueryParams set to true but this is now removed in Angular 4+ versions for the benefit of queryParamsHandling.

Query Params With RouterLink

If one wishes to use the RouterLink directive instead to navigate to the route, he/she can set query parameters:

In case you want to maintain or merge query parameters on subsequent navigation, you need to follow this:

How to access Query Param Values?

By now we already know how to pass optional query parameters to a route, let us move forward and see how to access these values on the resulting routes. The Activated Route class has a request Paramount property that returns an observable to the query param available in the current URL.

Given below is the following route URL:

http://localhost:4200/customers?order=popular

In order to  access the order query param we can perform the below action:

There also exists a ParamMap request which returns an observable with a paramMap object.

Given below is a route URL:

http://localhost:4200/customers?order=popular&filter=old

Here we have used the object spreading operator and this is the resulting form of the data in orderObj: