angular - Dynamic RouterLink href value is changing but router-link is correct -

i have ng-for loop outputting menu class dynamically. first time page loaded, ng-reflect-router-link , ng-reflect-href set correctly. issue after on of links clicked, ng-reflect-hrefs change whatever link clicked.

routes.ts

import { routerconfig } '@angular/router'; import { home } './views/home/home'; import { fetchdata } './components/fetch-data/fetch-data'; import { counter } './components/counter/counter';  export const routes: routerconfig = [      { path: 'home', component: home },     { path: 'counter', component: counter },     { path: 'fetch-data', component: fetchdata } ]; 

sidebar-menu.ts

import * ng '@angular/core'; import {router_directives, http} './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 in service.ts         http.get('/api/menu/menus').subscribe(result => {             this.menus = result.json();         });     }   } 

menu.ts

interface menu {     name: string;     decorator: string; } 

sidebar-menu.html

<ul>     <li *ngfor="#menu of menus" > <a [routerlink]="menu.name">             <span class='glyphicon glyphicon-th-list {{menu.decorator}}'></span> {{menu.name}}</a> /li> </ul> 

after click link (couter link clicked in example below), html looks like:

<ul class="nav navbar-sidebar">          <!--template bindings={   "ng-reflect-ng-for-of": "[object object],[object object]" }--><li>             <a ng-reflect-router-link="counter" ng-reflect-href="/counter" href="/counter">                 <span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "></span> counter             </a>         </li><li>             <a ng-reflect-router-link="fetch-data" ng-reflect-href="/counter" href="/counter">                 <span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "></span> fetch-data             </a>         </li>         </ul> 

my project set similar dynamic routerlink value ngfor item giving error "got interpolation ({{}}) expression expected". links displaying correctly, unlike post.

my issue json object had more properties defined javascript interface.