Angular routerLink to path

Question

I need to go to localhost:4200/route/SOME_PARAMETER where SOME_PARAMETER is a property of the component.

Currently I have this:

<a [routerLink]="['/route/${SOME_PARAMETER}']">

But it's taking me to an incorrect route.

I think I just need to figure out the syntax.

Answer 1

Could you also provide your routing module?

Anyways,

in the routing module you would have following syntax:

{ path: 'route/:id', component: SomeComponent} (with or without "route", you got to know)

and the routerLink would look like that

[routerLink]="'route/' + parameter" (while "parameter" would be a global variable of the component.

Answer 2

What you're looking for is adding Dynamic Values to a routerLink.The syntax is the following, you can pass as many arguments as you want.

<a [routerLink]="['route',parameter]">

Of course you need to set up your routing module correctly. Considering your example it would be:

[{ path: 'route/:some_param', component: ComponentToBeRendered }]

From the official documentation:

You can use dynamic values to generate the link. For a dynamic link, pass an array of path segments, followed by the params for each segment. For example, ['/team', teamId, 'user', userName, {details: true}] generates a link to /team/11/user/bob;details=true.

https://angular.io/api/router/RouterLink