Property binding not working for [routerlink] ANGULAR

Question

I want to create generic url for my menu from db

If I hard code the router link for example with the value memo then the application works

<ul>
  <li *ngFor="let menu of contractMenus"><a [routerLink]="['memo']">{{ menu.facetName }}</a></li>
</ul>

However if I want to make it generic like so

<ul>
  <li *ngFor="let menu of contractMenus"><a [routerLink]="['{{ menu.facetUrl }}']">{{ menu.facetName }}</a></li>
</ul>

Then I get stuck on Loading.... And nothing happens I do not understand why or how I can fix this issue.

If you open the developer console, you'll probably see an error which gives you a hint about the issue. (Answer below anyway) — Gaël J
– Gaël J, Commented Aug 2, 2021 at 19:33
@GaëlJ when I right click in chrome and I opened the console. I did not see any errors. — J.C
– J.C, Commented Aug 2, 2021 at 19:37
@GaëlJ when I launch my app chrome starts then I can open the console. Before I start my app I can not start the chrome console. Do you mean the console in visual studio 2019? — J.C
– J.C, Commented Aug 2, 2021 at 19:47
You can open a tab, open the console and only then enter your app URL to navigate to it. — Gaël J
– Gaël J, Commented Aug 2, 2021 at 19:48

Batajus · Accepted Answer · 2021-08-02 19:28:46Z

5

I think the solution to your problem is quite simple.

Due to the binding with [] you don't need the string interpolation for the more generic approach ;)

If you change it, like following, it should work:

<ul>
  <li *ngFor="let menu of contractMenus"><a [routerLink]="[menu.facetUrl]">
    {{ menu.facetName }}</a>
  </li>
</ul>

answered Aug 2, 2021 at 19:28

Batajus

6,3453 gold badges28 silver badges39 bronze badges

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

1 Comment

Thank you very much I did not realize that I did not need the {{}} in the binding with []. Since I am new too angular. Thank you.