Introduction

Query parameters are parameters that are optional and can be passed to a route. They are added on at the end the of a URL with a question mark separating between the URL and the query parameters, like so: https://www.abc.com/user/1?norefresh.

What is the difference between a query parameter and a route parameter?

Route parameters are required parameters that form part of the definition of the route. Angular Router uses these parameters when determining the correct route. On the other hand, query parameters are optional parameters. They are used when values are optional.

Implementing query parameters

Query parameters are not considered as part of the route. Therefore, we do not place them in the route array as we did with passing data to routes. We can pass query parameters in two ways: Using a directive called routerlink and router.navigate.

Using the routerLink directive, we implement query parameters in the following manner:

<a [routerLink]="['/users']" [queryParams]="{condition: 'deleted'}">

The router then adds on to the base URL the condition above as follows: /users?condition=deleted. You can name the key whatever you want, but for this example I called it condition.

You are not limited to one query parameter, you can pass more:

<a [routerLink]="['/users']" [queryParams]="{cond1: value1, cond2: value2}">

NOTE: Angular will deprecate queryParams in an undetermined future version of Angular. queryParamMap will be used instead.

Using this.router.navigate

When can also navigate routes with query parameters using this.router.navigate like so:

getUsersByPosition() {
    this.router.navigate(['/users/'], {queryParams: {positions: 'manager'}});
}

The result of the above method will appear in the address bar as follows:

http://localhost:4200/users?positions=manager

You can also pass several query parameters:

getUsersByPosition() {
    this.router.navigate(['/users/'], {queryParams: {positions: 'manager', 'order': 'ascending', active: true}});
}

The above will appear in the address bar as follows:

http://localhost:4200/users?positions=manager&order=ascending&active=true

Using queryParamMap

queryParamMap is a map that is an observable which consists of the query parameters of the present route. We can access it in order to get the values in the query parameters.

We can access it using ActivatedRoute. We will use Dependency Injection in order to inject the ActivatedRoute into the component’s constructor:

constructor(private activatedRoute: ActivatedRoute, private router: Router){

}

We then can subscribe to queryParamMap which is part of ActivatedRoute so that we can get an observable of the data type ParamMap. Once we have done that, we can then use get in order to retrieve the parameter of the query:

public queryParam: any;
public pageNumber: string;

this.queryParam = this.activatedRoute.queryParamMap.subscribe(param => {
    this.pageNumber = param.get('pageNumber');
})

This can also be done using a property called snapshot which is part of queryParamMap:

this.activatedRoute.snapshot.queryParamMap.get('pageNumber');

Be careful when using snapshot as it contains the query parameters when the component is initially loaded. Therefore, only the initial data of the query parameter is available using snapshot. Any changes to the data after that is non-retrievable.

Conclusion

In this blog post we covered query parameters and the different ways to work with them. I hope this blog post has been helpful. Please feel free to contact me with feedback by clicking on the envelope icon at the top of the page.