Angular Router Query Parameters

Parameters for query parameters allow you to transfer optional parameters across any route in the application. Query parameters differ from regular routing parameters, which are only available on a route and are not optional (eg: / customer /: id). Let's see how you work with query parameters.

Query Params With Router.navigate

If you navigate to the route for the purpose of using the Router.navigate, you submit demand parameters:

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

This will result in the following url:

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

You can also specify multiple query parameters like this:

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

And the url looks like this:

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

Preserve or merge query parameter with query Paramedic Action

By default, the query parameters will be lost by a later navigation action. To prevent this, you may set queryParamsHandling to either maintain or merge. Let's say we're on the customer route and want to route the item to the item while keeping the query parameters:

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

We can use merge instead of preserving if you also send new query parameters to the item's route:

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

The resulting URL:

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

Conservation of query parameters was used with preserveQueryParams set to true, but this is now removed in Angular 4+ for the benefit of queryParamsHandling.

Query Params With RouterLink

If you instead use the RouterLink directive to navigate to the route, you can set query parameters:

  Customers

And if you want to maintain or merge query parameters on subsequent navigation:

  Items

Accessing Query Param Values

Now that we know how we pass into optional query parameters to a route, let's see how to access these values ??on the resulting routes. The ActivatedRoute class has a request Paramount property that returns an observable to the query parameters available in the current url.

Given the following route URL:

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

For accessing the order query param we can do like this:

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

@Component({ ... })
export class CustomerComponent 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
      });
  }
}

There is also ParamMap request, which returns an observable with a paramMap object.

Given the following route URL:

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

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

We used the object spreading operator here and this is the resulting form of the data in orderObj:

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