How to get parameters from the Angular ActivatedRoute

Question

I'm trying to get the prameter :id from my activated route using observables. When I print params on the console I get the right values for :id. But it's not the case for this.id. I get the value NaN. Can you tell me what is the problem

export class RecipeEditComponent implements OnInit {
  id: number;
  editMode = false;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(
      (params: {id: string}) => {
        this.id = +params.id;
        console.log(this.id);
      }
    );
}
}

Could you put that code into your question as code block and not as image. — penleychan, Apr 04 '19 at 20:19
Undifined Even though I'm getting the right object when I print params the object with :id = 1 — faouzi Ch, Apr 04 '19 at 20:29
how do you call this route? what is in your browsers address bar? — robert, Apr 04 '19 at 20:42
the route is : { path: '::id/edit', component: RecipeEditComponent} The link in the browser is: http://localhost:4200/recipes/0/edit — faouzi Ch, Apr 04 '19 at 21:08

Damien · Accepted Answer · 2019-04-04T20:45:03.643

7

Change to this.id = +params.get('id').

You should use the method get() because it returns a single value for the given parameter id. You were getting an error because params is not a key with id as a value.

export class RecipeEditComponent implements OnInit {
  id: number;
  editMode = false;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
  // paramMap replaces params in Angular v4+
   this.route.paramMap.subscribe(params: ParamMap => {
        this.id = +params.get('id');
        console.log(this.id);     
  });
}

edited Apr 04 '19 at 20:45

answered Apr 04 '19 at 20:30

Damien

1,582
1
13
24

it shows this error: ERROR TypeError: "params.get is not a function" – faouzi Ch Apr 04 '19 at 20:34
1

If you are using Angular v4+, change `params` to `paramMap`. – Damien Apr 04 '19 at 20:38
I've changed it to paramMap but now it does print nothing on the console – faouzi Ch Apr 04 '19 at 20:43
Do you have the `console.log(this.id)` in the code? – Damien Apr 04 '19 at 20:46
Yes, now it prints 0 as value for 'this.id' But when I print params it gives me an object with the right values of 'id' – faouzi Ch Apr 04 '19 at 20:55
Why is there a + sign ? I haven't found anything on the documentation about it. – Ellone May 25 '20 at 17:26
3

@Ellone The + sign changes the id from a string to a number. – Damien May 27 '20 at 15:52

score 1 · Answer 2 · answered Apr 04 '19 at 20:17

I think the following code is going to work in your case:

ngOnInit() {
this.heroes$ = this.route.paramMap.pipe(
  switchMap(params => {
    // (+) before `params.get()` turns the string into a number
    this.selectedId = +params.get('id');
    return this.service.getHeroes();
  })
);

}

Also you can try this:

this.sessionId = this.route
  .queryParamMap
  .pipe(map(params => params.get('id') || 'None'));

score 1 · Answer 3 · answered Apr 22 '19 at 11:37

1

The problem was in the route definition: putting : instead of ::

answered Apr 22 '19 at 11:37

faouzi Ch

123
1
1
9

score 0 · Answer 4 · answered Apr 04 '19 at 22:15

0

Retrieve the params like this:

  ngOnInit() {
this.route.params.subscribe(
  (params: Params) => {
    this.id = +params["id"];
    console.log(this.id);
  }
);

} }

answered Apr 04 '19 at 22:15

RadekF

476
5
10

maybe try this: `Number(params["id"])` – RadekF Apr 05 '19 at 15:24

score 0 · Answer 5 · answered Apr 10 '22 at 09:48

0

id: number;

constructor(private route: ActivatedRoute) { }

ngOnInit() {

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

}

answered Apr 10 '22 at 09:48

Ahmed Alqassass

1

How to get parameters from the Angular ActivatedRoute

5 Answers5

Linked