Dynamic router-links

Hey guys! I’m playing around with Typescript and Angular2 and wanted to create router-links with the help of ng-for with the help of an stringArray but had some problems… Following example:

import { Component, View, NgFor, bootstrap, bind} from 'angular2/angular2';
import { ROUTER_BINDINGS, LocationStrategy, HashLocationStrategy, RouteConfig, RouterOutlet, RouterLink} from 'angular2/router';
import { CompA } from 'scripts/compA';
import { CompB } from 'scripts/compB';

@Component({
  selector: 'app',
})
@View({
  template:
  `<template ng-for #button [ng-for-of]="buttons">
     <a [router-link]=['/{{buttons}}']  class="menuButtons">{{button}}</a>
   </template>
   <router-outlet></router-outlet>`,
  directives: [ RouterOutlet, RouterLink, NgFor]
})
@RouteConfig([
  { path: '/', redirectTo: '/compA' },
  { path: '/compA', component: CompA, as: 'compA' },
  { path: '/compB', component: CompB, as: 'compB' }
])
export class App {
  buttons: String[];
  constructor() { this.Buttons = ["compA", "compB"]; }
}
bootstrap(NavBar, [ROUTER_BINDINGS, bind(LocationStrategy).toClass(HashLocationStrategy)]);

When I try create the router-links like that i get the following error: EXCEPTION: Parser Error: Got interpolation ({{}}) where expression was expected at column 3 in [['/{{button}}']] in null

I worked around this issue with handling the href of each link myself changing to template lines to:

<template ng-for #button [ng-for-of]="buttons">
  <a href="/#/{{button}}" class="menuButtons" >{{button}}</a>
</template>
<router-outlet></router-outlet>`

While this is working I think it’s not the angular2 way of doing it. Can you help me somehow?

[PatrickJS]

prefered method

<a [router-link]=" [ '/' + buttons ] " class="menuButtons">{{ button }}</a>

without the router

<a [href]=" '/#/' + button " class="menuButtons" >{{ button }}</a>

[DeusProx]

Well… thank you! It works now but you got one s to much. The working example is:

<template ng-for #button [ng-for-of]="buttons">
  <a [router-link]=" [ '/' + button ]class="menuButtons" >{{button}}</a>
</template>
<router-outlet></router-outlet>

I couldn’t find any examples for this for hours and my own test-approaches had no success! Hope this can help other people too! Thank you!