RouterLink inside a repeater angular 2

Question

There is a routerLink that enables the necessary routes for navigation provided with the config.

It works fine, if it is done something like below:

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#" [routerLink]="['/home']">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" [routerLink]="['/about']">About</a>
    </li>
</ul>

But it fails when used inside a *ngFor repeater, like this

<ul class="nav">
    <li class="nav-item" *ngFor="let item of menu">
        <a class="nav-link" href="#" [routerLink]="['{{item.link}}']">{{item.name}}</a>
    </li>
</ul>

I have searched enough on Google but I wasn't able to find a satisfying answer.

Any help is appreciated

Answer 1

You don't need '{{item.link}}'

Use only item.link without '' and {{}}

<ul class="nav">
     <li class="nav-item" *ngFor="let item of menu">
         <a class="nav-link" href="#" [routerLink]="[item.link]">{{item.name}}</a>
     </li>
</ul>

If you want to concatenate the routerLink

you can do

[routerLink]="['./page/' + item.id]"