In this tutorial, let us look at how to pass and access the Optional or query parameters in Angular. Query parameters allow you to pass optional parameters like page number to the component. In this tutorial, we look at how to pass the query parameters using the queryParams directive. We then look at how to retrieve the parameter in the component using the ActivatedRoute Service.
In this article
What are query parameters
Query parameters are optional parameters that you pass to a route. The query parameters are added to the end of the URL Separated by Question Mark
For Example
/product?page=2
where page=2 is the query parameter
The above URL is an example of paginated product list, where URL indicates that second page of the Product list is to be loaded.
Difference between Query parameter and route parameter
The route parameters are not optional. They are essential to determining the route. The query parameters are optional.
How to use Query Parameters
Query parameters are not defined in routes array like route parameters.
Passing Query Parameters
The query parameters are passed to the route using the queryParams directive. This directive must be used along with the routerLink directive as shown below.
1 2 3 | <a [routerLink]="['product']" [queryParams]="{ page:2 }">Page 2</a> |
The router will construct the URL as ‘/product?pageNum=2’
You can pass more than one Query Parameter as shown below
1 2 3 | <a [routerLink]="['product']" [queryParams]="{ val1:2 , val2:10}">Whatever</a> |
The router will construct the URL as ‘/product?val1=2&val2=10’
You can also navigate programmatically using the navigate method of the Router service as shown below
1 2 3 4 5 | goToPage(pageNum) { this.router.navigate(['/product'], { queryParams: { page: pageNum } }); } |
Reading Query Parameters
Reading the Query parameters is similar to reading the Router Parameter. There are two ways by which you can retrieve the query parameters.
Using queryParams observable
The ActivatedRoute has an observable property queryParams that contain the query parameters of the activated route.
You can subscribe to the query parameter as shown below
1 2 3 4 5 6 | this.sub = this.route.queryParams .subscribe(params => { this.pageNum = +params['pageNum']||0; }); |
Using snapshot property
You can also get the value of the query parameter using the snapshot
1 2 3 | this.pageNum=this.route.snapshot.queryParams["pageNum"]; |
Remember you will read only the initial value of the query parameter with the snapshot property. You will not be able to retrieve any subsequent changes to the query parameter.
Query Params Example
Let us build a small application to demonstrate the use of Query parameters
Let us update the app that we have built in the Passing Parameters to Route tutorial. You can download the code from gitHub. From the folder “Parameters” and the Final code at “QueryParameters”
First, we need to pass query parameter to Product Page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Routing Module - Query Parameters'; pageNum=0; } |
We have added the pageNum variable.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><strong> {{title}} </strong></a> </div> <ul class="nav navbar-nav"> <li><a [routerLink]="['home']">Home</a></li> <div class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Page No" [(ngModel)]="pageNum"> </div> </div> <li class="nav"><a [routerLink]="['product']" [queryParams]="{ pageNum: pageNum, test:5 }">Product</a></li> <li><a [routerLink]="['contact']">Contact us</a></li> </ul> </div> </nav> <router-outlet></router-outlet> </div> |
First we have added input box for the page No using the ngModel directive is used from two way binding
1 2 3 | <input type="text" class="form-control" placeholder="Page No" [(ngModel)]="pageNum"> |
And then updated the routerlink directive and added the queryParams directive and passed the pageNum to “pageNum” variable
1 2 3 | <li class="nav"><a [routerLink]="['product']" [queryParams]="{ pageNum: pageNum }">Product</a></li> |
The Angular will construct the URL as “/product?pageNum=2”
Product Template
There is only one change in the Product Template. We have added a Next Page button at the bottom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <h1>Product List</h1> Page No {{pageNum}} <div class='table-responsive'> <table class='table'> <thead> <tr> <th>ID</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr *ngFor="let product of products;"> <td>{{product.productID}}</td> <td><a [routerLink]="['/product',product.productID]">{{product.name}} </a> </td> <td>{{product.price}}</td> </tr> </tbody> </table> </div> <button (click)="nextPage()">Next Page</button> |
Product Component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router} from '@angular/router'; import { ProductService } from './product.service'; import { Product } from './product'; @Component({ templateUrl: './product.component.html', }) export class ProductComponent { pageNum=0; products:Product[]; sub; constructor(private _Activatedroute:ActivatedRoute, private _router:Router, private _productService:ProductService){ } ngOnInit() { console.log('OnInit'); this.products=this._productService.getProducts(); this.sub = this._Activatedroute.queryParams .subscribe(params => { this.pageNum = +params['pageNum']||0; console.log('Query params ',this.pageNum) }); } nextPage() { this._router.navigate(['./'], { queryParams: { pageNum: this.pageNum + 1 }, relativeTo: this._Activatedroute } ); } ngOnDestroy() { this.sub.unsubscribe(); } } |
First, we have injected both ActivatedRoute and Router Service in the constructor
1 2 3 4 5 6 | constructor(private _Activatedroute:ActivatedRoute, private _router:Router, private _productService:ProductService){ } |
Next, in the OnInit lifecycle hook, we have subscribed to the queryParams property. We are updating our local variable pageNum with page number obtained from the Queryparams
Our code only displays the value of the Page Number in the template. In real life situation, you would query the database to retrieve the products
1 2 3 4 5 6 7 8 9 10 | ngOnInit() { this.products=this._productService.getProducts(); this.sub = this._Activatedroute.queryParams .subscribe(params => { this.pageNum = +params['pageNum']||0; console.log('Query params ',this.pageNum) }); } |
Finally, we have a nextPage function, which increases the page Number by 1. You can also implement the functions like prevPage, gotoPage etc
1 2 3 4 5 | nextPage() { this._router.navigate(['./'], { queryParams: { pageNum: this.pageNum + 1 }, relativeTo: this._Activatedroute } ); } |
Here, we are navigating to the current route using the navigate method of the router service. “./” represents the current route. The angular router does not re create the component, but since we have subscribed to the Query parameters, we will be notified of the change in page Number.
Testing the Application
Run the application, enter the page Number and click on the Product Link.
your next (“Navigation Between Routes”) is not working its showing 404 error. hence you write a very nice, good and valuable blog. i just read only angular2 and you explain in very good manner with good coding style. keep it up and also enable the page as i mentioned earlier. Please available on you tube also with live example. if you have time to get in touch with your user try to come on skype that will more valuable to your user to solve there query.
Once again lots of thanks to write this blog.
Thanks