Passing parameters between a parent page to the child component

Question

I am having difficulty with the routing mechanism within Angular 9. I have a Buildings component and a BuildingDetailComponent. I cannot pick up the param inside the BuildingDetailCompoent. It's not in there even though it appears in the URL in the address bar.

So in the Parent component I just have this..

const routes: Routes = [ { path: '', component: BuildingsComponent, data: { title: 'Buildings' } } ];

Then in the Building Detail compoent for the routing I have this.

 const routes: Routes = [ { path: '', component: BuildingDetailComponent, data: { title: 'Buildings},
  children: [ 
    { path: 'building-detail', component: BuildingDetailComponent, data: { title: 'Building Detail' } },
    { path: 'building-detail/:id', component: BuildingDetailComponent, data: { title: 'Building Detail' } }       
  ]
}
];

So basically I pass the value in like this within my BuildingComponent.html...

<td style="text-align: center;"><button [routerLink]="['./building-detail', building.ID]" class="button button-primary"><span >Edit</span></button></td>

Then in the BuildingDetailComponent I go to collect the value using the following...

this.buildingID = (this.route.snapshot.paramMap.get('id') != null) ? parseInt(this.route.snapshot.paramMap.get('id')) : 0;

I've tried alot with the routing and finally this is the only part I now need this.building.ID is undefined so when I look into this.route there are no params even though the value passed can be seen in the address bar.

I can get at it by doing the below and probably doing something with it but it feels wrong.

let URL = this.router.url;

I was hoping as a last avenue someone might be able to provide me with advice on this.

Thanks.

Have you tried to use `this.route.snapshot.params.id`? By the way, you don't need to use `parseInt` to transform you id into an integer, you can a `+`. — JoH, May 07 '20 at 11:35
Hi, I've tried that and the result is undefined. There are no params in the ActivatedRoute although it is in the URL. Thanks for the parseint tip. — Whistler1, May 07 '20 at 11:39

score 2 · Accepted Answer · answered May 07 '20 at 11:45

The issue is Angular will go to the first matched route which is path: '' so that's why you couldn't see the :id there.

We could improve children routing by making some changes so Angular will go to path :id in children route

const routes: Routes = [ 
  { 
    path: 'building-detail',   
    children: [ 
      { path: '', component: BuildingDetailComponent, data: { title: 'Building Detail' } },
      { path: ':id', component: BuildingDetailComponent, data: { title: 'Building Detail' } }       
    ] 
  }
];

Hope it helps

Passing parameters between a parent page to the child component

1 Answers1