Query parameters allow you to pass optional parameters to a route such as pagination information.
For example, on a route with a paginated list, the URL might look like the following to indicate that we've loaded the second page:
localhost:3000/product-list?page=2
The key difference between query parameters and route parameters is that route parameters are essential to determining route, whereas query parameters are optional.
Use the [queryParams]
directive along with [routerLink]
to pass query parameters. For example:
<a [routerLink]="['product-list']" [queryParams]="{ page: 99 }">Go to Page 99</a>
Alternatively, we can navigate programmatically using the Router
service:
goToPage(pageNum) {this.router.navigate(['/product-list'], { queryParams: { page: pageNum } });}
Similar to reading route parameters, the Router
service returns an Observable we can subscribe to to read the query parameters:
import { Component } from '@angular/core';import { ActivatedRoute, Router } from '@angular/router';​@Component({selector: 'product-list',template: `<!-- Show product list -->`})export default class ProductList {constructor(private route: ActivatedRoute,private router: Router) {}​ngOnInit() {this.sub = this.route.queryParams.subscribe(params => {// Defaults to 0 if no query param provided.this.page = +params['page'] || 0;});}​ngOnDestroy() {this.sub.unsubscribe();}​nextPage() {this.router.navigate(['product-list'], { queryParams: { page: this.page + 1 } });}}
​View Example​