Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"

Question

I'm trying to set the routerLink value in a directive based on a dynamic set of items from the component. But an error is being thrown from Angular2:

EXCEPTION: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in AppHeader@5:40 ("     <a *ngFor="let item of headerItems" [ERROR ->][routerLink]=" {{item.routerLink}} ">       {{item.text}}     </a> "): Header@5:40 

header.component.ts

import {Component} from '@angular/core'; import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';  @Component({   selector: 'app-header',   templateUrl: './app/components/header/header.component.html',   directives: [ROUTER_DIRECTIVES] }) export class AppHeader {   headerItems: Object[] = [];    constructor() {     this.headerItems.push(       { classes: 'navLink', routerLink: ['/Home'], text: 'Home' }     );   } } 

header.component.html

<div id="HeaderRegion">   <nav class="nav">     <a *ngFor="let item of headerItems" [routerLink]=" {{item.routerLink}} ">       {{item.text}}     </a>   </nav> </div> 

Answer 1

You can't use [] combined with {{}} either the former or the later

[routerLink]="item.routerLink" 

Should do what you want.

routerLink="{{item.routerLink}}" 

would bind item.routerLink.toString() to the routerLink property.

Answer 2

You may also go with the following code to pass expression with some text.

<div *ngFor="let customer of customers">    <a [routerLink]="'customer/'+customer.index">Link</a> </div>