How To Use Query Parameters with Angular Router

To follow through this tutorial, you’ll need:

• Some familiarity with Angular Router and RouterLink and ActivatedRoute may be beneficial.

If you are navigating to the route imperatively using Router.navigate, you will pass in query parameters with queryParams.

In our example, if we want to route visitors to the products with the list ordered by popularity, it would look like this:

goProducts() {
  this.router.navigate(
    ['/products'],
    { queryParams: { order: 'popular' } }
  );
}

This will result in a URL that resembles:

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

You can also provide multiple query parameters. In our example, if we want to route visitors to the products with the list ordered by popularity and filtered with an expensive price range, it would look like this:

goProducts() {
  this.router.navigate(
    ['/products'],
    { queryParams: { order: 'popular', 'price-range': 'not-cheap' } }
  );
}

This will result in a URL that resembles:

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

Now, you have an understanding of how queryParams can be used to set query parameters.

By default, the query parameters are lost on any subsequent navigation action. To prevent this, you can set queryParamsHandling to either 'preserve' or 'merge'.

In our example, if we want to route visitors from a page with the query parameter { order: 'popular' } to the /users page while keeping the query parameters, we would use 'preserve':

goUsers() {
  this.router.navigate(
    ['/users'],
    { queryParamsHandling: 'preserve' }
  );
}

This will result in a URL that resembles:

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

In our example, if we want to route visitors from a page with the query parameter { order: 'popular' } to the /users page while passing the query parameter { filter: 'new' }, we would use 'merge':

goUsers() {
  this.router.navigate(
    ['/users'],
    {
      queryParams: { filter: 'new' },
      queryParamsHandling: 'merge' }
    );
}

This will result in a URL that resembles:

http://localhost:4200/users?order=popular&filter=new

Now, you have an understanding of how queryParamsHandling can be used to preserve and merge query parameters.

In our example, if instead, you are using the RouterLink directive to navigate to the route, you would use queryParams like this:

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

And in our example, if you want to 'preserve' or 'merge' query parameters on subsequent navigation you would use queryParamsHandling like this:

<a
   [routerLink]="['/users']"
   [queryParams]="{ filter: 'new' }"
   queryParamsHandling="merge"
>
  Users
</a>

Now you understand how queryParams and queryParamsHandling can be used with RouterLink.

Now that we know how to pass in optional query parameters to a route, let’s see how to access these values on the resulting routes. The ActivatedRoute class has a queryParams property that returns an observable of the query parameters that are available in the current URL.

Given the following route URL:

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

We can access the order query parameter like this:

// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params); // { order: "popular" }

        this.order = params.order;

        console.log(this.order); // popular
      }
    );
  }
}

In the console log, we would see the params object:

Output
{ order: "popular" }

And the params.order value:

Output
popular

There’s also queryParamMap, which returns an observable with a paramMap object.

Given the following route URL:

http://localhost:4200/products?order=popular&filter=new

We can access the query parameters like this:

this.route.queryParamMap
  .subscribe((params) => {
    this.orderObj = { ...params.keys, ...params };
  }
);

We used the object spread operator here, and this is the resulting shape of the data in orderObj:

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

Now, you have an understanding of how queryParams and queryParamMap can be used to access values on the resulting routes.

In this article, you used different examples to set and get query parameters in Angular. You were introduced to queryParams and queryParamsHandling with Router.navigate and RouterLink. You were also introduced to queryParams and queryParamMap with ActivatedRoute.

If you’d like to learn more about Angular, check out our Angular topic page for exercises and programming projects.