Best way to fetch a route parameter with Angular

Question

What is the best way to take the value of my id in the current route (with ActivatedRoute or Router) ? And explain why :)

n°1

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.id = this.route.snapshot.params['id']
}

n°2

constructor(private router: Router) {}

ngOnInit() {
 this.id = this.router.url.includes('id')
}

Please define your parameters for "best" in objective terms. Opinion-based questions are off-topic on Stack Overflow. — TylerH, Mar 10 '20 at 16:29

score 4 · Answer 1 · answered Jan 24 '20 at 09:56

4

It is better to subscribe to the paramMap

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

answered Jan 24 '20 at 09:56

talhature

2,246
1
14
28

Why it is better ? And you forgot to unsubscribe... – Tim Dec 23 '20 at 17:11
Good point @TimothyALCAIDE however it's left for brevity in my answer. And this is a better approach than manually iterating params or any other approach since you subscribe to the parameter map changes as it is supposed to be. – talhature Dec 30 '20 at 06:40

score 1 · Answer 2 · edited Jan 30 '20 at 10:29

1

First declare in your constructor from ActivatedRoute from '@angular/router';

constructor ( private route: ActivatedRoute ){}

Then by using this code you will get your query params

this.route.queryParams.subscribe(params =>{ let Id = params ["Id"]; }

edited Jan 30 '20 at 10:29

marc_s

732,580
175
1,330
1,459

answered Jan 24 '20 at 10:19

ketan vaidya

49
3

score 1 · Answer 3 · answered Dec 08 '20 at 18:00

You need to unsubscribe from anything you subscribe to to prevent memory leaks.


paramsSubscription$: Subscription;
id: string;

constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() {
  this.paramsSubscription$ = this.route.paramMap.subscribe(
    (params: ParamMap) => {
      this.id = params.get("id");
  });
}

ngOnDestroy() {
  if (this.paramsSubscription$) this.paramsSubscription$.unsubscribe();
}

score 0 · Answer 4 · edited Jan 24 '20 at 12:25

0

this.route.params.forEach((params: Params) => {
    const id = +params['id'];
    // more stuff
});

edited Jan 24 '20 at 12:25

ankitkanojia

3,072
4
22
35

answered Jan 24 '20 at 09:57

Seryoga

793
6
15

score -1 · Answer 5 · answered Jan 24 '20 at 09:56

-1

Import Router in component.

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

pass it in constructor

private router : Router

Now this will give router parameter

this.router.url;

answered Jan 24 '20 at 09:56

Abhishek Tiwari

135
7

The question is Best way to fetch a route parameter with Angular. This is not the correct answer. This returns the entire url. – Martijn Hiemstra Aug 26 '20 at 11:08

Best way to fetch a route parameter with Angular

5 Answers5