How to pass and get parameter with Router params in Angular 4.?

Question

I want to pass an id with url using Router in Angular. And i have to fetch that value on another page. Like I have a student list. On click of edit button belongs to particular student on the list. The id of that student pass to edit student details page. After fetching that studentId I want show existing details in the input fields.

So How i can do this?

this is my example path

 { path: 'school-students-list', component: studentsListPageComponent },
  { path: 'edit-student-details', component: studentEdit },

@JaydipJadhav yes . id should be passed like this in url. example:( school-students-list/:123) — Deepak Pookkote
– Deepak Pookkote, Commented Nov 9, 2017 at 5:47

Jared · Accepted Answer · 2017-11-09 07:08:58Z

6

Give the route a parameter like this:

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

And then use ActivatedRoute in that component to access the route parameters. Import it from @angular/router

import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

Inject this into the constructor

private routeSub: Subscription;

constructor(private route: ActivatedRoute) {}

On init, subscribe to route parameters

ngOnInit(): void {
    this.routeSub = this.route.params.subscribe((params: Params): void => {
        const id = params['id'];
    });
}

Always a good idea to unsubscribe on destroy

ngOnDestroy(): void {
    this.routeSub.unsubscribe();
}

And to link to this page, passing in their member ID, do this on your student listings page:

<a [routerLink]="['/edit-student-details', memberId]">Edit</a>

To navigate via a component method, inject Router from @angular/router and then when you want to navigate, use this.router.navigate(['/edit-student-details', memberId]);

edited Nov 9, 2017 at 7:08

answered Nov 9, 2017 at 5:50

Jared

2,0964 gold badges24 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jared Over a year ago

I updated my answer with how to use ActivatedRoute

Deepak Pookkote Over a year ago

in my case the id is dynamic.. that is coming from api response and i assigned it in (memberId). so i can pass member id here or what?

Jared Over a year ago

When you navigate to let's say /edit-student-details/1 the id then accessed through ActivatedRoute. Is that what you are trying to do? It's a bit unclear.

Deepak Pookkote Over a year ago

i'm having a student list page there i can view list of students (each student is assigned with a unique memberId) this is the response from the API and i'm displaying it. Student List contains (studentlist.html ,and studentlist.ts) and on UI there is a edit button associated with each row .so on click of each raw it should show me the details of the student in text fields for editing . edit page contains (editStudent.ts and html file)

Deepak Pookkote Over a year ago

when click event occurs the id should be passed through url and i should be able to fetch that id in that page.. can u help me with this @Jared

|

Sergey Rusakov · Accepted Answer · 2017-11-09 07:21:38Z

2

Import ActivatedRoute from @angular/router

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

Access parameter from constructor:

constructor(private route: ActivatedRoute) {
    let id = +this.route.snapshot.params['id'];
    // use the id here
}

answered Nov 9, 2017 at 7:21

Sergey Rusakov

1172 bronze badges

Collectives™ on Stack Overflow

How to pass and get parameter with Router params in Angular 4.?

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related