Currently facing an issue with the routing mechanism in Angular 9. Specifically, I am struggling to capture the parameter inside the BuildingDetailComponent even though it is present in the URL displayed in the address bar.
In the Parent component, my routes are defined as follows:
const routes: Routes = [ { path: '', component: BuildingsComponent, data: { title: 'Buildings' } } ];
And for the Building Detail component's routing:
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' } }
]
}
];
To pass the value within my BuildingComponent.html:
<td style="text-align: center;"><button [routerLink]="['./building-detail', building.ID]" class="button button-primary"><span >Edit</span></button></td>
When trying to retrieve the parameter in BuildingDetailComponent:
this.buildingID = (this.route.snapshot.paramMap.get('id') != null) ? parseInt(this.route.snapshot.paramMap.get('id')) : 0;
I have explored various options without success, and now seeking advice regarding this specific issue. Any help would be greatly appreciated. Thank you.