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

Solution

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]"

Comments

[Arunkumar Srisailapathi]

Thanks! Worked like a charm

[valignatev]

@Arun Kumar Don't forget to accept an answer if it works for you. So other folks could easily find it.

[Matt Burland]

Any chance you could add a why? You don't need ... because...?

[Greg]

@ShaneCourtrille Because Angular already evaluates the contents of angular tag properties. {{ }} is for use outside of angular properties, like between tags. If it's not a standard html element property, but instead one added as part of angular, then you're already golden.