Angular 5 : How to get parent component routing parameter in child component?

Question

Here is add-new-folder.component, this component is child component of folder.component when I route on add-new-folder.component from folder.component that time I want folder.component parameter userid in its child component, I tried below code but i get console NaN how to get parent component parameter in child component kindly help me?

add-new-folder.component.ts

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

ngOnInit() {     
  this.route.parent.params.subscribe(params => {
    const parentRouteId = +params['userid'];
    console.log(parentRouteId);
  });
}

folder.component.html

<mat-icon [routerLink]="['/addNewFolders/',userid]">folder</mat-icon>

app-routing.module.ts

const routes: Routes = [
 { path: 'folder/:userid', component : FolderComponent,
   children: [
     { path: 'addNewFolders/:userid', component : AddNewFolderComponent },
   ]},
];

You are doing it right, just remove the + from +params['userid'], I believe your parameter is not numeric. — Ashish Ranjan
– Ashish Ranjan, Commented Nov 27, 2018 at 6:21

Farhat Zaman · Accepted Answer · 2018-11-27 06:11:48Z

1

try this approach. first create two common methods in any common file which will be used to get and set your id.

let parameterId : string=" ";
export function setParameterId(id) {
  parameterId = id;
}

export function getParameterId() {
  return parameterId;
}

before navigate to child component, first call this.setParameterId(id); and after navigate to child component get that id by calling this.getParameterId()

answered Nov 27, 2018 at 6:11

Farhat Zaman

1,37910 silver badges22 bronze badges

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

Comments

Ravi · Accepted Answer · 2018-11-27 07:38:04Z

1

Add the below attribute your route link to preserve the params.

 <a [routerLink]="['/base/addNewFolders/',userid]" queryParamsHandling="preserve"></a>

You just have to preserve your queryParams so that you get the parameters to the child components too

answered Nov 27, 2018 at 7:38

Ravi

366 bronze badges

Collectives™ on Stack Overflow

Angular 5 : How to get parent component routing parameter in child component?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related