In this tutorial, we learn how to pass parameters (route parameter) or data to the Route in Angular. First, let us look at how to define the route, which accepts the parameter. We then learn how to pass the parameters to the route using the routerLink
directive. Finally, we learn how to retrieve the parameters using the ActivatedRoute
Service. The parameters can be retrieved by either using snapshot
method or by subscribe
method. We take a look at both of these methods.
There are many scenarios, where you need to pass parameters to the route. For example, to navigate to the product detail view, we need to pass the product ID
, so that component can retrieve it and display it to the user.
Let us build on the Application we built in the Routing & Navigation tutorial and add a product detail page, which displays the product detail based on the Product ID passed in the URL. The code for this tutorial available on Github under the folder parameters.
Table of Content
What are Route Parameters
The Route parameters are a dynamic part of the Route
and essential in determining the route.
For example, consider the following route
1 2 3 | { path: 'product', component: ProductComponent } |
The above route match only if the URL is /product
To retrieve the product details, our URL should look something like
/product/1
/product/2
Where the second URL segment ( 1 and 2 ) being the id of the product. The id is dynamic and changes as per the selected Product. To handle such scenario angular router allows us to include route parameters, where we can send any dynamic value for a URL segment
How to Pass parameters to Angular Route
Defining the Route
We can define parameter by adding forward slash followed colon and a placeholder (id) as shown below
1 2 3 | { path: 'product/:id', component: ProductDetailComponent } |
Now above path matches the URLs /product/1
, /product/2
, etc.
If you have more than one parameter, then you can extend it by adding one more forward slash followed colon and a placeholder
1 2 3 | { path: 'product/:id/:id1/:id2', component: ProductDetailComponent } |
The name id
, id1
& id2
are placeholders for parameters. We will use them while retrieving the values of the parameters.
Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular
We, now need to provide both path and the route parameter routerLink
directive.
This is done by adding the productID
as the second element to the routerLink
parameters array as shown below
1 2 3 | <a [routerLink]="['/Product', ‘2’]">{{product.name}} </a> |
Which translates to the URL /product/2
OR
1 2 3 | <a [routerLink]="['/Product', product.productID]">{{product.name}} </a> |
Which, dynamically takes the value of id from the product object.
Retrieve the parameter in the component
Finally, our component needs to extract the route parameter from the URL
This is done via the ActivatedRoute service from angular/router module to get the parameter value
ActviatedRoute
The ActivatedRoute is a service, which keeps track of the currently activated route associated with the loaded Component.
To use ActivatedRoute
, we need to import it in our component
1 2 3 | import { ActivatedRoute } from '@angular/router'; |
Then inject it into the component using dependency injection
1 2 3 | constructor(private _Activatedroute:ActivatedRoute) |
ParamMap
The Angular adds the map all the route parameters in the ParamMap
object, which can be accessed from the ActivatedRoute
service
The ParamMap
makes it easier to work with parameters. We can use get
or getAll
methods to retrieve the value of the parameters in the component. Use the has
method to check if a certain parameter exists.
The Older version of ActivatedRoute class has a Params array which is an array of the parameter values, indexed by name. You can still use it but It is now deprecated and is replaced by the ParamMap.
There are two ways in which you can use the ActivatedRoute
to get the parameter value from the ParamMap
object.
- Using Snapshot
- Using observable
Using Snapshot
1 2 3 | this.id=this._Activatedroute.snapshot.paramMap.get("id"); |
The snapshot
property returns the initial value of the route. You can then access the paramsMap
array, to access the value of the id
, as shown above,
Use the Snapshot option, if you only need the initial value.
Using Observable
1 2 3 4 5 | this._Activatedroute.paramMap.subscribe(params => { this.id = params.get('id'); }); |
You can retrieve the value of id
by subscribing to the paramMap
observable property of the activateRoute
as shown above
Use this option if you expect the value of the parameter to change over time.
Why use observable
We usually retrieve the value of the parameter in the ngOninit life cycle hook, when the component initialised.
When the user navigates to the component again, the Angular does not create the new component but reuses the existing instance. In such circumstances, the ngOnInit
method of the component is not called again. Hence you need a way to get the value of the parameter.
By subscribing to the observable paramMap property, you will retrieve the latest value of the parameter and update the component accordingly.
The above difference is explained in our next tutorial Angular child routes tutorial.
Passing Parameters to Route: Example
Here is the complete list of code.
product.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { Component, OnInit } from '@angular/core'; import { ProductService } from './product.service'; import { Product } from './product'; @Component({ templateUrl: './product.component.html', }) export class ProductComponent { products:Product[]; constructor(private productService:ProductService){ } ngOnInit() { this.products=this.productService.getProducts(); } } |
product.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <h1>Product List</h1> <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> |
product.service.ts
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 | import { Observable } from 'rxjs'; import {Product} from './Product' export class ProductService{ public getProducts() { let products:Product[]; products=[ new Product(1,'Memory Card',500), new Product(2,'Pen Drive',750), new Product(3,'Power Bank',100) ] return products; } public getProduct(id) { let products:Product[]=this.getProducts(); return products.find(p => p.productID==id); } } |
product.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | export class Product { constructor(productID:number, name: string , price:number) { this.productID=productID; this.name=name; this.price=price; } productID:number ; name: string ; price:number; } |
In the product.component.html, we have added product.productID
as the second argument to the routerLink
parameters array.
1 2 3 | <a [routerLink]="['/product',product.productID]">{{product.name}} </a> |
Product Details Component
product-detail.component.ts
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router,ActivatedRoute } from '@angular/router'; import { ProductService } from './product.service'; import { Product } from './product'; @Component({ templateUrl: './product-detail.component.html', }) export class ProductDetailComponent { product:Product; id; constructor(private _Activatedroute:ActivatedRoute, private _router:Router, private _productService:ProductService){ } /* Using snapshot */ // ngOnInit() { // //This still works but is deprecated // //this.id=this._Activatedroute.snapshot.params['id']; // this.id=this._Activatedroute.snapshot.paramMap.get("id"); // let products=this._productService.getProducts(); // this.product=products.find(p => p.productID==this.id); // } /* Using Subscribe */ sub; ngOnInit() { this.sub=this._Activatedroute.paramMap.subscribe(params => { console.log(params); this.id = params.get('id'); let products=this._productService.getProducts(); this.product=products.find(p => p.productID==this.id); }); // This params is deprecated //this.sub=this._Activatedroute.params.subscribe(params => { // this.id = params['id']; // let products=this._productService.getProducts(); // this.product=products.find(p => p.productID==this.id); // //}); } ngOnDestroy() { this.sub.unsubscribe(); } onBack(): void { this._router.navigate(['product']); } } |
product-detail.component.html
1 2 3 4 5 6 7 8 9 10 11 | <h3>Product Details Page</h3> product : {{product.name}} price : {{ product.price}} <p> <a class='btn btn-default' (click)="onBack()">Back </a> </p> |
In the ProductDetailComponent, we have imported router
and ActivatedRoute
from the angular router module
1 2 3 4 | import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router,ActivatedRoute } from '@angular/router'; |
In the constructor, we inject the ActivatedRoute
, Router
service along with ProductService
1 2 3 4 5 6 | constructor(private _Activatedroute:ActivatedRoute, private _router:Router, private _productService:ProductService){ } |
Finally, we use ngOninit
life cycle hook to retrieve the value of the id
parameter and use that value to retrieve the details of the product.
Note that, there are two ways, by which you can retrieve the data.
Using snapshot
1 2 3 4 5 6 7 8 9 10 11 12 13 | ngOnInit() { //This still works but is deprecated //this.id=this._Activatedroute.snapshot.params['id']; this.id=this._Activatedroute.snapshot.paramMap.get("id"); let products=this._productService.getProducts(); this.product=products.find(p => p.productID==this.id); } |
Using Subscribe
We used snapshot method to retrieve the parameter in the ProductDetailcomponet.ts. To Subscribe to params remove the ngOnInit and replace it with the following code
We recommend you to use the subscribe method as it offers the benefit of responding to the parameter changes dynamically.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ngOnInit() { this.sub=this._Activatedroute.paramMap.subscribe(params => { console.log(params); this.id = params.get('id'); let products=this._productService.getProducts(); this.product=products.find(p => p.productID==this.id); }); // This params is deprecated //this.sub=this._Activatedroute.params.subscribe(params => { // this.id = params['id']; // let products=this._productService.getProducts(); // this.product=products.find(p => p.productID==this.id); // //}); } |
The Routes
app.routing.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { Routes } from '@angular/router'; import { HomeComponent} from './home.component' import { ContactComponent} from './contact.component' import { ProductComponent} from './product.component' import { ErrorComponent} from './error.component' import { ProductDetailComponent} from './product-detail.component' export const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'contact', component: ContactComponent }, { path: 'product', component: ProductComponent }, { path: 'product/:id', component: ProductDetailComponent }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', component: ErrorComponent } ]; |
We have added the following route to our routes array
1 2 3 | { path: 'product/:id', component: ProductDetailComponent }, |
Other components
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Routing Module - Parameters Demo'; } |
app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" [routerLink]="['/']"><strong> {{title}} </strong></a> </div> <ul class="nav navbar-nav"> <li><a [routerLink]="['home']">Home</a></li> <li><a [routerLink]="['product']">Product</a></li> <li><a [routerLink]="['contact']">Contact us</a></li> </ul> </div> </nav> <router-outlet></router-outlet> </div> |
contact.component.ts
1 2 3 4 5 6 7 8 9 10 11 | import {Component} from '@angular/core'; @Component({ template: `<h1>Contact Us</h1> <p>TekTutorialsHub </p> ` }) export class ContactComponent { } |
home.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 | import {Component} from '@angular/core'; @Component({ template: `<h1>Welcome!</h1> <p>This is Home Component </p> ` }) export class HomeComponent { } |
error.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 | import {Component} from '@angular/core'; @Component({ template: `<h1>Page not found</h1> <p>This is a Error Page</p> ` }) export class ErrorComponent { } |
app.module.ts
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 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { HomeComponent} from './home.component' import { ContactComponent} from './contact.component' import { ProductComponent} from './product.component' import { ErrorComponent} from './error.component' import { ProductDetailComponent} from './product-detail.component' import { ProductService } from './product.service'; import { appRoutes } from './app.routes'; @NgModule({ declarations: [ AppComponent,HomeComponent,ContactComponent,ProductComponent,ErrorComponent,ProductDetailComponent ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ], providers: [ProductService], bootstrap: [AppComponent] }) export class AppModule { } |

ActivatedRoute
The ActivatedRoute service has a great deal of useful information including:
url: This property returns an array of Url Segment objects, each of which describes a single segment in the URL that matched the current route.
params: This property returns a Params object, which describes the URL parameters, indexed by name.
queryParams: This property returns a Params object, which describes the URL query parameters, indexed by name.
fragment: This property returns a string containing the URL fragment.
Snapshot: The initial snapshot of this route
data: An Observable that contains the data object provided for the route
Component: The component of the route. It’s a constant
outlet: The name of the RouterOutlet used to render the route. For an unnamed outlet, the outlet name is primary.
routeConfig: The route configuration used for the route that contains the origin path.
parent: an ActivatedRoute that contains the information from the parent route when using child routes.
firstChild: contains the first ActivatedRoute in the list of child routes.
children: contains all the child routes activated under the current route
pathFromRoot: The path from the root of the router state tree to this route
Conclusion
We looked at how to pass parameters or data to the Route. The parameters are passed to the route by using routerLink parameters in the routerLink directive. We retrieve the parameters from ActivatedRoute Service by reading params collection of the snapshot object or by subscribing to the params observable.
why i used ActivatedRoute extends in BaseComponet, i don’t have use
Superb, awesome. Very clear explanation with details. You made my day.
Why are you using only components and not pages? Would it work the same way??
could you give a link to github or codepen? It will be much easier to understend what happens in code