Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected" : <p>I'm trying to set the <code>routerLink</code> value in a directive based on a dynamic set of items from the component. But an error is being thrown from Angular2:</p>

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

<p><strong>header.component.ts</strong></p>

<pre><code>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' }
    );
  }
}
</code></pre>

<p><strong>header.component.html</strong></p>

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