A Complete Tutorial on Angular Query Parameters

In the Angular app development ecosystem, query parameters enable the Angular app development companies to pass optional parameters across any angular route in the application. Query parameters in angular aren’t similar to route parameters, which are only available on one route in the application. Query parameters are the key-value pairs in the URL. In this blog, we will learn more about them, and go through ways that can be used to access and pass multiple query parameters via examples.

1. What are Angular Query Parameters?

Angular Query parameters are popularly known as Query params. They are the key-value pairs that appear in the browser URL on the right side after the “?” symbol. In the URL, each query parameter is separated by &. 

For instance, the URL is /products?page=1&year=2024&filter=all 

In this example, you can see that page=1&year=2024&filter=all is the query params. It holds three query parameters, the first one is Page with the value 1, the second query param is filtered with the year 2024, and the third query param is filtered with the value all. They are called query strings and they are separated by &. 

2. Ways to Pass Query Parameters in Angular

Now, after understanding what Query Parameters are in Angular, let’s see how Angular developers can pass it. So, when it comes to passing query parameters in Angular, different ways can be used by the developers. Here, we will go through some of the widely used methods for passing multiple parameters-

2.1 Using Router.navigate

The very first method that can be used to pass the query parameter in Angular is by using Router.navigate. This approach can be used by Angular app developers to navigate a route parameter. This query enables navigation. 

For instance, when the developer wants the Angular application to navigate the users to a list of products ordered by year, the developer will have to pass an orderby query parameter with queryParams as shown in the below code. 

goToProducts() { 
  this.router.navigate(['/products'], { queryParams: { orderby: year } }); 
}

When the developer passes the query parameter, the URL will look like this – 

http://localhost:4200/products?orderby=year

2.2 Using RouterLink

The next approach that can be used to pass query parameters is RouterLink. This method can be used to pass query parameters while navigating to the route. To carry out this approach, the developer will have to use the following code.

<a [routerLink]="['/products']" [queryParams]="{ orderby: year }"> 
  Products 
</a>

Just like this one, a developer can also use queryParamsHandling when the requirement to preserve or merge parameters arises. For this, the code can be written as shown in the below.

<a [routerLink]="['/add-product']" 
   [queryParams]="{ name: tatvasoft }" 
   queryParamsHandling="merge"> 
  Add Product 
</a>

2.3 Using the router.navigateByUrl Method

The third way to pass query parameters is router.navigateByUrl which Angular developers widely use. The developer can use the navigateByUrl method of the router.navigateByUrl. For this, a strong query string must be programmed just like the example below.

this.router.navigateByUrl('products?page=2');

3. How to Access the Query Parameters?

Now, after learning about query parameters and ways to pass them in the Angular applications, let’s see how one can access the query parameters. For this, the following approaches can be taken into consideration.

3.1 Using the Snapshot Property to Access a Query Parameter

The first approach that can be used to access the query parameters by using the snapshot property. Here, the snapshot property tends to return the initial value of a route parameter. This means that once the snapshot property does that, the developer can get access to the paramMap array and then retrieve the parameter’s value by using the get() method. Below is an example of the same.

Example: product.component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
@Component({ 
  selector: 'app-product', 
  templateUrl: './product.component.html', 
  styleUrls: ['./product.component.css'] 
}) 
export class ProductComponent { 
  id: string | null; 
 
  constructor(private router: Router){} 
 
  ngOnInit() { 
  	this.id = this.route.snapshot.paramMap.get('id'); 
  } 
}

The above example shows that the developer gets the value of the id parameter and then stores it in id.

Here, in the below line of code, we will see the ID in the component’s view with property binding.

Example: product.component.html

<p>Product ID: {{id}}</p>

As seen in the above line of code, the ID is shown. Now, when one clicks the button or link to enable the parameter, it will be displayed in the paragraph. This example shows that the snapshot property is used only when there is a requirement for an initial value.

3.2 Using an Observable to Access the Query Parameter

Another approach that can be used to access the query parameter is by using an observable. Here, the Angular developer can easily retrieve the value of a parameter by subscribing to the ActivatedRoute’s paramMap observable property.

For this, the code shown below can be used.

Example: product.component.ts

import { Component } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
@Component({ 
  selector: 'app-product', 
  templateUrl: './product.component.html', 
  styleUrls: ['./product.component.css'] 
}) 
export class ProductComponent { 
  id: string | null; 
  constructor(private activatedRoute: ActivatedRoute){} 
  ngOnInit() { 
 	this.activatedRoute.paramMap.subscribe(params => { 
  	this.id = params.get('id'); 
	}); 
  } 
}

As seen in the above code, an observable is used when the value of the Angular application is expected to change over time.

4. Which One to Use? Snapshot or Observable

In the above section, we had a look at both the methods that can be used to access the query parameters. But which one to use is a big question in many Angular developers’ minds. So here, we will try to come up with an answer to this question. 

Generally, the Query parameter’s value is retrieved in the ngOninit life cycle hook. This is feasible after the initialization process of a component is carried out. In this case, when a user navigates to the same component and if the component has already been loaded, Angular will carry out the new component creation but will try to reuse the existing one. If this happens, the ngOnInit method will not be called again. 

In the same scenario, if you are using Snapshot to read the Query parameters in ngOnInit, then you will get stuck with the values when the component is loaded. It indicates that Snapshot is not Observable. This means that it will not notify the Angular developer about the changes that are made in the value. On the other hand, if the developer has subscribed to the paramMap observable, a notification will be sent after every single change in the value which eventually enables the Angular developers to retrieve the latest value of the parameter whenever necessary.

5. Conclusion

As seen in this blog, query parameters are useful in Angular applications to generate URLs with query strings. Here we saw different methods that can be used to pass the query parameters and access them, but which one to use depends on the project type and requirements.