Angular 7 - Get Param Value from the url

Question

I already went through link: How to get param from url in angular 4? and trying to follow the same approach.

I am using Angular 7 and my current URL: http://localhost:4200/student-details/488

When I clicked on different Side Pane link, I want to get the value 488 and pass that value to other component.

I used below in ngOnit() where my page is routing to.

this.route.paramMap.subscribe(params => {
   console.log('params', params);
});

score 0 · Answer 1 · answered Sep 10 '19 at 13:24

0

Assuming your routing module has something similar to below -

{
    path: 'student-details/:id',
    component: StudentDetailsComponent,
}

You can get the 488 (:id) property from student-details/488 like -

this.route.paramMap.subscribe(params => {
   let id = params.get('id');
   // let id = +params.get('id'); //<--- if you want to convert it into a numeric value
   console.log('Student Id', id);
});

answered Sep 10 '19 at 13:24

Pankaj

538
4
13

`console.log('Student Id', id);`, why not to use `console.log('Student Id'+ id);` – PAA Sep 12 '19 at 10:04
In current example, both would output the same. `,` based `console.log` is useful when you are printing a javascript object. Using `,` operator will allow you to inspect the object in console. – Pankaj Sep 12 '19 at 10:12
`this.route.paramMap` not giving me any value actually from detailed Page, I want to pass StudentId to other component, so that using Student Id I want to show other details – PAA Sep 12 '19 at 10:14
Unable to pass Id to other components – PAA Sep 12 '19 at 10:27
can you provide the code for your routing module and your component where you're trying to access the property. Also, a quicker way to help you fix the issue would be to create a minimum reproducible scenario at https://stackblitz.com – Pankaj Sep 12 '19 at 10:30
Now I want to redirect it to `{ path: 'member', loadChildren: './member/member.module#MemberModule' }` – PAA Sep 12 '19 at 12:03

Sudipto Mukherjee · Answer 2 · 2019-09-16T06:05:02.047

0

I am using angular 8

Component from where I am routing

this.router.navigate(['/ledger-card'], { queryParams: { branchId: '10', loanAcc: '2738'}});

Component where I am receiving the routed data

const param = this.route.snapshot.queryParamMap;
    if  (param.get('branchId')) {
      const branchId =  param.get('branchId');
      const loanAcc = param.get('loanAcc');
    }

** Make sure you import ActivatedRoute

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}

edited Sep 16 '19 at 06:05

answered Sep 11 '19 at 11:07

Sudipto Mukherjee

807
6
11

How to send Id to other component(s) which is independent of other component ? – PAA Sep 12 '19 at 10:00

score 0 · Answer 3 · answered Jan 21 '20 at 16:45

Routing Module:

  ...
  {
    path: '',
    component: YourListComponent
  },
  {                                  // 
    path: ':id',                     // <-- 
    component: YourSingleComponent   // <-- 
  }                                  // 
  ...

yoursingle.component.ts

...

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

export class YourSingleComponent implements OnInit {
    ...

    singleID: number;
    ...

    constructor(
        private _route: ActivatedRoute,
    ) {
    }

    ngOnInit() {
        this.singleID = parseInt(this._route.snapshot.paramMap.get("id"));
    }

    ...
}

Angular 7 - Get Param Value from the url

3 Answers3