Angular access routing parameter from parent

Question

I have this Routing:

{ path: 'item/:id',
  component: parentComponent,
  children: [
    { path: 'edit', component: childComponent }
  ]
}

To navigate to this Location I use this:

this.router.navigate(['/item/' + item.id + '/edit']);

Now my Question is:

How can now my childComponent know the id? What Code do I need to get the id in the child.component.ts? (parentComponent also Needs to know the id, thats why I dont have the Parameter at the end)

This has been answered already here https://stackoverflow.com/a/45998138/11719787 — Sameer, Jan 13 '20 at 08:39

Themistoklis Bogiatzoglou · Accepted Answer · 2020-01-13T10:21:57.337

3

In the child component you can add the following line.

You need to target the parent route snapshot because the current snapshot is the current route, which is the child component

constructor(private route: ActivatedRoute) {
  this.id = this.route.parent.snapshot.paramMap.get('id')
  console.log('got the id', this.id);
}

Or if you want to subscribe the param in the child component you can use instead

 constructor(private route: ActivatedRoute) {
    this.route.parent.params.subscribe(params => console.log('params id', params.id));
  }

edited Jan 13 '20 at 10:21

answered Jan 13 '20 at 08:47

Themistoklis Bogiatzoglou

459
2
7
21

Is there a way to subscribe it? I subscribe it in my parent component with: `this.route.params.subscribe(params => (this.id = params.id))` – LastChar23 Jan 13 '20 at 10:05
1

in child component try the following, this.route.parent.params.subscribe(params => (this.id = params.id)); – Themistoklis Bogiatzoglou Jan 13 '20 at 10:11

Angular access routing parameter from parent

1 Answers1