CODEWITHSUNDEEP
javascriptangularangular2-routing
hdotluna
hdotluna

Reputation: 5732

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 url: http://localhost:8099/#/companies/bdo

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

I'm aware that I can get the url by using window.location.href and split into an array. In that way, I can get the last parameter of the url above. However, I wanted to know if there's a proper way to do this in Angular.

Any help would be appreciated. Thanks

Upvotes: 143

Views: 265439

Answers (7)

KK Nebula
KK Nebula

Reputation: 129

You could try this for get route parameter:

import { Component, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { take } from 'rxjs'

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css'],
})
export class HeroComponent implements OnInit {
  constructor(private activeRoute: ActivatedRoute) {}

  ngOnInit(): void {
    this.activeRoute.queryParams.pipe(take(1)).subscribe((qp) => {
      console.log(
        'Get Router Params:',
        this.activeRoute.snapshot.params.bank,
      )
    })
  }
}

You can check more details of the route URL here

Upvotes: 1

daniil_
daniil_

Reputation: 980

Since Angular 16 you can bind route info to component inputs, see the link.

const appRoutes: Routes = [
    { path: 'companies/:name', component: CompaniesComponent },
]

Using components inputs:

@Component({})
export class CompaniesComponent implements OnInit {
    /* 
        We can use the same name as the query param
        Example url: http://localhost:4200/companies/my-bank
    */
    @Input() name?: string; // we can use the same name as the query param

    /* 
        Or we can use a different name
        Example url: http://localhost:4200/companies/my-bank
    */
    @Input('name') queryParam?: string; // we can also use a different name

    ngOnInit() {
        // do something with the query
    }
}

Upvotes: 4

Ishan Bhatt
Ishan Bhatt

Reputation: 54

Yes, surely you can get the param using the Angular way. Angular provides 2 ways to get the param value from the URL.

  1. Using the ActivatedRoute from @angular/router. Please check below code for the same. (https://angular.io/api/router/ActivatedRouteSnapshot)

    this.route.snapshot.paramMap.get('id');

  2. Using the paramMap Observable (https://angular.io/api/router/ParamMap)

    this.route.paramMap.subscribe((params: ParamMap) => { this.id = +params.get('id') });

Please check documentation links as well. And before using this.router please import ActivatedRoute from '@angular/router' for 1st option and import ActivatedRoute, ParamMap both for 2nd option. Below is the example.

import { ActivatedRoute} from '@angular/router'

import { ActivatedRoute, ParamMap } from '@angular/router'

Upvotes: 0

user2267367
user2267367

Reputation: 872

This topic is already quite old, but still on top of my the search engine results. I am pretty sure the ways that have been shown here already work. But some of them are outdated or incomplete. So this is an up-to-date complete example, that hopefully helps you. I call the parameter receiving component PersonComponent. First part are your Routes most likely defined in app.module.ts (app-routing.module.ts):

const routes: Routes = [
{path: "/", component: HomeComponent}, 
{path: "person/name/:personName", component: PersonComponent}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Notice the :personName in the route for the PersonComponent, this is the key we have to look for you can call it however you please. Next use this route in the HTML part of another (or the same) component:

<a routerLink="person/name/Mario">This is Mario</a>
<a routerLink="person/name/Luigi">This is Luigi</a>
<a routerLink="person/name/Bowser">This is Bowser</a>

Here the :personName is replaced with actual names. Last one is reading this parameter in the PersonComponent

import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.scss']
})
export class PersonComponent {

  constructor(route: ActivatedRoute) {
    const name = route.snapshot.paramMap.get('personName');
    console.log(name)
    //do whatever you want with it
  }
}

You can see that the :personName from the Routes is used as a key, to get the value from the paramMap.

Upvotes: 5

belzebubele
belzebubele

Reputation: 86

Instead of going with paramMap you can also go fancy and use a Route Resolver although this might be a bit overkill and is usually used to fetch data during the navigation process...

setup resolver

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';

import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LastUrlPathResolver implements Resolve<Observable<string>> {

  constructor(activatedRouteSnapshot: ActivatedRouteSnapshot){}

  resolve(): Observable<string> {
    return activatedRouteSnapshot.url[activatedRouteSnapshot.url.length-1]
  }
}

setup routes

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { NewsResolver } from './news.resolver';

import { TopComponent } from './top/top.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  },
  {
    path: 'top',
    component: TopComponent,
    resolve: { message: LastUrlPathResolver }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

use it like

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class TopComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data;
  }
}

find more here https://www.digitalocean.com/community/tutorials/angular-route-resolvers

Upvotes: 0

BeetleJuice
BeetleJuice

Reputation: 40886

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"

Upvotes: 302

Kurtis Jungersen
Kurtis Jungersen

Reputation: 2554

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

Upvotes: 29

Related Questions