angular nested routing parent to child variables

Question

I have this route:

{ 
  path: ':parent_id',
  component: Parent, 
  children: [
    {
      path: 'child',
      children: [
        {
          path: ':child_id',
          component: Child
         }
      ]
    }
  ]
}

How do I retrieve the parent_id value from within the Child component?

mgm87 · Accepted Answer · 2018-10-09 14:25:55Z

3

You should be able to access it using the ActivatedRoute

First import it: import {ActivatedRoute} from "@angular/router";

Then try something like this:

constructor(private route: ActivatedRoute) {

  this.route.parent.params.subscribe((params) => {
    console.log(params); // This would show you all the available params

    if (params['parent_id']) { 
      console.log(params['term']) // Prints the console parent_id param
    }
  });

}

edited Oct 9, 2018 at 14:25

answered Oct 9, 2018 at 13:51

mgm87

9141 gold badge7 silver badges12 bronze badges

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

4 Comments

ferd tomale Over a year ago

I have this in ngOnInit: this.route.paramMap.subscribe((p: ParamMap) => { const parent_id = p.get('parent_id'); ... but it is null.

mgm87 Over a year ago

Try using this.route.parent.params instead of this.route.params

ferd tomale Over a year ago

nice. I just noticed that ActivatedRoute had a parent property. Thanks. this.route.parent.paramMap.subscribe((p: ParamMap) => { console.log(p.get('parent_id')); });

mgm87 Over a year ago

Nice, I updated my answer to say route.parent.params

Collectives™ on Stack Overflow

angular nested routing parent to child variables

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related