Passing Parameters Angular 2


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:


The key difference between query parameters and route parameters is that route parameters are essential to determining route, whereas query parameters are optional.

Passing Query Parameters

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 } });

Reading Query Parameters

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

  selector: 'product-list',
  template: `<!-- Show product list -->`
export default class ProductList {
    private route: ActivatedRoute,
    private router: Router) {}

  ngOnInit() {
    this.sub = this.route
      .subscribe(params => {
        // Defaults to 0 if no query param provided. = +params['page'] || 0;

  ngOnDestroy() {

  nextPage() {
    this.router.navigate(['product-list'], { queryParams: { page: + 1 } });

Credit: Github

Related Post

Latest Post

Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.