Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get parameter on Angular2 route in Angular way?

Route

const appRoutes: Routes = [     { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},     { path: 'companies/:bank', component: BanksComponent },     { path: '**', redirectTo: '/companies/unionbank' } ] 

Component

const NAVBAR = [     {          name: 'Banks',         submenu: [             { routelink: '/companies/unionbank', name: 'Union Bank' },             { routelink: '/companies/metrobank', name: 'Metro Bank' },             { routelink: '/companies/bdo', name: 'BDO' },             { routelink: '/companies/chinabank', name: 'China Bank' },         ]     },     ... ] 

Example of link: http://localhost:8099/#/companies/bdo

I want to get String bdo in the example link above.

I'm aware that I can get the link by using window.location.href and split into array. So, I can get the last param but I want to know if there's a proper method on doing this in angular way.

Any help would be appreciated. Thanks

like image 748
hdotluna Avatar asked Oct 27 '16 03:10

hdotluna


People also ask

How do you access the parameters passed to a route in Angular?

The first way is through the route snapshot. The route snapshot provides the initial value of the route parameter map (called the paramMap ). You can access the parameters directly without subscribing or adding observable operators. The paramMap provides methods to handle parameter access like get , getAll , and has .

How will you extract route parameters?

To extract the parameter, you need to make the dynamic parameter in the route path so that you can extract the value of the parameter by parameter name.

How does Angular routing handle route parameters?

To access the route parameters, we use route.snapshot , which is the ActivatedRouteSnapshot that contains information about the active route at that particular moment in time. The URL that matches the route provides the productId . Angular uses the productId to display the details for each unique product.


2 Answers

Update: Sep 2019

As a few people have mentioned, the parameters in paramMap should be accessed using the common MapAPI:

To get a snapshot of the params, when you don't care that they may change:

this.bankName = this.route.snapshot.paramMap.get('bank'); 

To subscribe and be alerted to changes in the parameter values (typically as a result of the router's navigation)

this.route.paramMap.subscribe( paramMap => {     this.bankName = paramMap.get('bank'); }) 

Update: Aug 2017

Since Angular 4, params have been deprecated in favor of the new interface paramMap. The code for the problem above should work if you simply substitute one for the other.

Original Answer

If you inject ActivatedRoute in your component, you'll be able to extract the route parameters

    import {ActivatedRoute} from '@angular/router';     ...          constructor(private route:ActivatedRoute){}     bankName:string;          ngOnInit(){         // 'bank' is the name of the route parameter         this.bankName = this.route.snapshot.params['bank'];     } 

If you expect users to navigate from bank to bank directly, without navigating to another component first, you ought to access the parameter through an observable:

    ngOnInit(){         this.route.params.subscribe( params =>             this.bankName = params['bank'];         )     } 

For the docs, including the differences between the two check out this link and search for "activatedroute"

like image 142
BeetleJuice Avatar answered Sep 19 '22 23:09

BeetleJuice


As of Angular 6+, this is handled slightly differently than in previous versions. As @BeetleJuice mentions in the answer above, paramMap is new interface for getting route params, but the execution is a bit different in more recent versions of Angular. Assuming this is in a component:

private _entityId: number;  constructor(private _route: ActivatedRoute) {     // ... }  ngOnInit() {     // For a static snapshot of the route...     this._entityId = this._route.snapshot.paramMap.get('id');      // For subscribing to the observable paramMap...     this._route.paramMap.pipe(         switchMap((params: ParamMap) => this._entityId = params.get('id'))     );      // Or as an alternative, with slightly different execution...     this._route.paramMap.subscribe((params: ParamMap) =>  {         this._entityId = params.get('id');     }); } 

I prefer to use both because then on direct page load I can get the ID param, and also if navigating between related entities the subscription will update properly.

Source in Angular Docs

like image 37
Kurtis Jungersen Avatar answered Sep 19 '22 23:09

Kurtis Jungersen