title: Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"
body: <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>