title: Dynamic RouterLink href value is changing but router-link is correct
body: <p>I have an ng-for loop outputting my menu class dynamically. The first time the page is loaded, the ng-reflect-router-link and ng-reflect-href are set correctly. The issue is after on of the links are clicked, all ng-reflect-hrefs change to whatever link was clicked.</p>
  
  <p><strong>routes.ts</strong></p>
  
  <pre><code>import { RouterConfig } from '@angular/router';
  import { Home } from './views/home/home';
  import { FetchData } from './components/fetch-data/fetch-data';
  import { Counter } from './components/counter/counter';
  
  export const routes: RouterConfig = [
  
      { path: 'home', component: Home },
      { path: 'counter', component: Counter },
      { path: 'fetch-data', component: FetchData }
  ];
  </code></pre>
  
  <p><strong>sidebar-menu.ts</strong></p>
  
  <pre><code>import * as ng from '@angular/core';
  import {ROUTER_DIRECTIVES, Http} from './index.ts'
  
  @ng.Component({
      selector: 'sidebar-menu',
      template: require('./sidebar-menu.html'),
      directives: [...ROUTER_DIRECTIVES]
  })
  export class SidebarMenu {
      public menus: Menu[];
      constructor(http: Http) {
          //todo - put this in a service.ts
          http.get('/api/Menu/Menus').subscribe(result =&gt; {
              this.menus = result.json();
          });
      }
  
  
  }
  </code></pre>
  
  <p><strong>menu.ts</strong></p>
  
  <pre><code>interface Menu {
      name: string;
      decorator: string;
  }
  </code></pre>
  
  <p><strong>sidebar-menu.html</strong></p>
  
  <pre><code>&lt;ul&gt;    
  &lt;li *ngFor="#menu of menus" &gt;
  &lt;a [routerLink]="menu.name"&gt;
              &lt;span class='glyphicon glyphicon-th-list {{menu.decorator}}'&gt;&lt;/span&gt; {{menu.name}}&lt;/a&gt;
  /li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>After I click a link (couter is the link I clicked in the example below), this is what the html looks like:</p>
  
  <pre><code>&lt;ul class="nav navbar-sidebar"&gt;
  
          &lt;!--template bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object]"
  }--&gt;&lt;li&gt;
              &lt;a ng-reflect-router-link="counter" ng-reflect-href="/counter" href="/counter"&gt;
                  &lt;span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "&gt;&lt;/span&gt; counter
              &lt;/a&gt;
          &lt;/li&gt;&lt;li&gt;
              &lt;a ng-reflect-router-link="fetch-data" ng-reflect-href="/counter" href="/counter"&gt;
                  &lt;span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "&gt;&lt;/span&gt; fetch-data
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>My project is set up very similar to <a href="https://stackoverflow.com/questions/37078494/dynamic-routerlink-value-from-ngfor-item-giving-error-got-interpolation">Dynamic routerLink value from ngFor item giving error &quot;Got interpolation ({{}}) where expression was expected&quot;</a>.
  but my links are displaying correctly, unlike that post.</p>