Query parameters (also known as query string parameters) are a way to pass data to a route in an Angular application. They are appended to the URL after a question mark ? and are key-value pairs separated by an ampersand &. Query parameters are commonly used for filtering data, pagination, or passing additional information to a component.

Query Strings are the optional data that we can pass to a component through a route. These query strings are added at the end of the route after a ?.

Example:

localhost:4200/Movies/Action?name=Robot

localhost:4200/Products/products?id=12345&name=moto-edge

#1 Access Query Parameters

To access query parameters within a component, you use the ActivatedRoute service and access the queryParams property or subscribe to the paramMap observable.

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
  // Access query parameters using snapshot
  const query = this.route.snapshot.queryParams['name'];

  // Or subscribe to query parameter changes using observables
  this.route.queryParams.subscribe(params => {
    const query = params['name'];
    // Perform actions based on the query parameter
  });
}

#2 Using Query Parameters in Templates

You can also access query parameters directly in component templates using the ActivatedRoute service or the async pipe.

<p>Search Query: {{ route.snapshot.queryParams.q }}</p>

<!-- Or using the async pipe -->
<p>Search Query: {{ (route.queryParams | async)?.q }}</p>

#3 Specifying Query Parameters using RouterLink

You can specify router query parameters using the routerLink directive by providing an array containing the route path and query parameters. Here's how you can specify router query parameters using routerLink:

<a [routerLink]="['/search']" [queryParams]="{ q: 'keyword' }">Search</a>

• [routerLink]="['/search']" specifies the route path to navigate to, which is '/search'.
• [queryParams]="{ q: 'keyword' }" specifies the query parameters to include in the URL. Here, 'q' is the query parameter key, and 'keyword' is the value.

When the user clicks on the link, Angular will navigate to the '/search' route with the query parameter 'q' set to 'keyword'. The resulting URL will look like '/search?q=keyword'.

You can include multiple query parameters by adding additional key-value pairs to the queryParams object:

<a [routerLink]="['/search']" [queryParams]="{ q: 'keyword', category: 'electronics' }">Search Electronics</a>

In this example, the resulting URL will include both 'q' and 'category' query parameters:

/search?q=keyword&category=electronics

By specifying router query parameters using routerLink, you can create dynamic navigation links in your Angular application that include query parameters for filtering, searching, or providing additional context to route components.

#4 Specifying Query Parameters in Component Class

To specify query parameters in a component class in Angular, you can use the Router service to navigate to a route with query parameters. Here's how you can do it:

import { Router } from '@angular/router';

constructor(private router: Router) { }

navigateToSearch(): void {
  // Define query parameters
  const queryParams = { q: 'keyword', category: 'electronics' };

  // Navigate to the 'search' route with query parameters
  this.router.navigate(['/search'], { queryParams });
}

In this example:

• We import the Router service from @angular/router.
• In the component's constructor, we inject the Router service.
• We define the query parameters as a JavaScript object, where each property represents a query parameter key-value pair.
• We use the navigate() method of the Router service to navigate to the '/search' route, passing the route path and the queryParams object as options.

When the navigateToSearch() method is called, Angular will navigate to the '/search' route with the specified query parameters. The resulting URL will look like '/search?q=keyword&category=electronics'.