Using Query Parameters in Angular to Pass Multiple Parameters to a Route

There are several ways to pass data from one component to another in Angular, but when it comes to passing multiple parameters in a route, query parameters are ideal. This technique is favored because it allows the parameters to stay in the URL while a user navigates the app, which permits functions like bookmarking and sharing URLs that hold specific states of an application.

Query parameters in Angular are similar to matrix parameters except that they are used to sort or filter listed items on a page. Essentially, they are not directly tied to a route's path.

Unlike matrix parameters, query parameters are less flexible in where they can be placed in a URL. They are typically added at the end of the URL and are prefixed with a question mark (?) and separated by ampersands (&). In a URL, the structure would look like this: /route?param1=value1&param2=value2.

Let's look at an example of passing multiple parameters using query parameters in Angular:

Firstly, import Router from @angular/router in your component.

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

Next, inject Router into your component’s constructor to be able to navigate with query parameters.

constructor(private router: Router) {
}

Then, create a function to navigate to another component with multiple parameters.

navigateWithQueryParams() {
    this.router.navigate(['/your-component'], {
    queryParams: {
      param1: 'value1', 
      param2: 'value2'
    }
  });
}

When you run the navigateWithQueryParams() function, the Angular router will create a URL like this: /your-component?param1=value1&param2=value2.

To retrieve those parameters in the YourComponent component, you would need to use the ActivatedRoute service.

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

constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
        console.log(params); // { param1: 'value1', param2: 'value2' }
    });
}

Bear in mind that this doesn't mean other methods for passing parameters are invalid. It's crucial to determine the best method for each situation. For instance, @Param decorator could be helpful when working with NestJS which is a server-side framework inspired by Angular. Meanwhile, the route snapshot is perfect for grabbing the current route information while route guards are used for protecting routes against unauthorised access. However, for the use case of passing multiple parameters in a route in Angular, query parameters are the best approach.