Search code examples
angularangular-routing

How do I effectively add a parameter to my Angular 7 routing?

So I'm trying to add a simple detail section to my E-commerce. The two paths looks like this:

{ path: 'items', component: ItemListComponent},
{ path: 'items/details/:id', component: ItemDetailComponent},

And here's my routerlink from ItemList components template:

<a routerLink="['/items/details',item.id]">See Details</a>

But when I click the button, my URL isn't /items/details/{id}. Copying the link address gives me this: /items/%5B'/items/details',item.id%5D

What is wrong with my approach and how could I possibly fix it? I just want my button to go from items to items/details/{id}. My item.id does include correct values so that isn't it.

I also get the error:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'items/%5B'/items/details',item.id%5D'

Error: Cannot match any routes. URL Segment: 'items/%5B'/items/details',item.id%5D'

Solution

  • You need to wrap routerLink in square brackets:

    <a [routerLink]="['/items/details',item.id]">See Details</a>