title: Angular2 beta14 Typescript routerLink binding error
body: <p>I'm trying to create a wizard using Angular2's router. Angular2 suggests to have a main bootstrap file, which will bootstrap all the app components. Since i'm not able to do a SPA, i would like each page to bootstrap it's own components. </p>
  
  <p>I get the following error about <code>routerLink</code> when i run the application:</p>
  
  <p>"EXCEPTION: Template parse errors:
  Can't bind to 'routerLink' since it isn't a known native property ("For="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [ERROR ->][routerLink]="'' + wizard.path + ''">{{wizard.name}}
          "</p>
  
  <p>Here is my page component:</p>
  
  <pre><code>/// &lt;reference path="angular2/typings/browser.d.ts" /&gt;
  /// &lt;reference path="angular2/core.d.ts" /&gt;
  /// &lt;reference path="angular2/router.d.ts" /&gt;
  
  import {bootstrap} from 'angular2/platform/browser';
  import {Component} from 'angular2/core';
  import {ROUTER_PROVIDERS} from 'angular2/router';
  
  import {Wizard1} from './wizard1';
  import {Wizard2} from './wizard2';
  import {Step1} from './step1';
  import {Step2} from './step2';
  import {Step3} from './step3';
  import {Step4} from './step4';
  import {Step5} from './step5';
  
  @Component({
      selector: 'page',
      template:
  '&lt;div&gt;
      &lt;select (change)="setSelectedWizard($event.target.value)"&gt;
          &lt;option *ngFor="#wizard of Wizards" [selected]="SelectedWizard == wizard" [value]="wizard.name" [routerLink]="'' + wizard.path + ''"&gt;{{wizard.name}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;wizard1&gt;
          &lt;step1&gt;
              &lt;h1&gt;First!&lt;/h1&gt;
          &lt;/step1&gt;
          &lt;step2&gt;
              &lt;h1&gt;Second!&lt;/h1&gt;
          &lt;/step2&gt;
          &lt;step3&gt;
              &lt;h1&gt;Third!&lt;/h1&gt;
          &lt;/step3&gt;
          &lt;step4&gt;
              &lt;h1&gt;Fourth!&lt;/h1&gt;
          &lt;/step4&gt;
          &lt;nav&gt;
              &lt;button type="button" value="Next" [class]="(SelectedStepIndex == Steps.length) ? 'btn btn-primary hidden' : 'btn btn-default'" (click)="next()" [routerLink]="['' + Steps[SelectedStepIndex] + '']"&gt;Next&lt;/button&gt;
          &lt;/nav&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/wizard1&gt;
      &lt;wizard2&gt;
          &lt;step1&gt;
              &lt;h1&gt;First!&lt;/h1&gt;
          &lt;/step1&gt;
          &lt;step5&gt;
              &lt;h1&gt;Fifth!&lt;/h1&gt;
          &lt;/step5&gt;
          &lt;nav&gt;
              &lt;button type="button" value="Next" [class]="(SelectedStepIndex == Steps.length) ? 'btn btn-primary hidden' : 'btn btn-default'" (click)="next()" [routerLink]="['' + Steps[SelectedStepIndex] + '']"&gt;Next&lt;/button&gt;
          &lt;/nav&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/wizard2&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;'
  })
  export class Page {
      Wizards = [{name: 'wizard1', path:'/wizard1'}, {name: 'wizard2', path: '/wizard2'}];
      SelectedWizard = this.Wizards[0];
  
      setSelectedWizard(value) {
         this.SelectedWizard = value;
      }
  }
  
  bootstrap(Page, [ROUTER_PROVIDERS]);
  bootstrap(Wizard1, [ROUTER_PROVIDERS]);
  bootstrap(Wizard2, [ROUTER_PROVIDERS]);
  bootstrap(Step1);
  bootstrap(Step2);
  bootstrap(Step3);
  bootstrap(Step4);
  bootstrap(Step5);
  </code></pre>
  
  <p><strong>Wizard1</strong></p>
  
  <pre><code>/// &lt;reference path="angular2/core.d.ts" /&gt;
  /// &lt;reference path="angular2/router.d.ts" /&gt;
  
  import {Component} from 'angular2/core';
  import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
  
  @RouteConfig([
      { path: '/wizard1', name: 'wizard1', component: Wizard1 }
  ])
  @Component({
      selector: 'wizard1',
      template:`&lt;div&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`
  })
  export class Wizard1 {
      Steps = ['/Step1', '/Step2', '/Step3', '/Step4'];
      SelectedStepIndex = 0;
  
      next() {
          ++this.SelectedStepIndex;
      }
  }
  </code></pre>
  
  <p><strong>Wizard2</strong></p>
  
  <pre><code>/// &lt;reference path="angular2/core.d.ts" /&gt;
  /// &lt;reference path="angular2/router.d.ts" /&gt;
  
  import {Component} from 'angular2/core';
  import {RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
  
  @RouteConfig([
      { path: '/wizard2', name: 'wizard2', component: Wizard2 }
  ])
  @Component({
      selector: 'wizard2',
      template:`&lt;div&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`
  })
  export class Wizard2 {
      Steps = ['/Step1', '/Step5'];
      SelectedStepIndex = 0;
  
      next() {
          ++this.SelectedStepIndex;
      }
  }
  </code></pre>
  
  <p><strong>All steps are similar to this, in their own .ts files</strong></p>
  
  <pre><code>/// &lt;reference path="angular2/core.d.ts" /&gt;
  /// &lt;reference path="angular2/router.d.ts" /&gt;
  
  import {Component} from 'angular2/core';
  import {RouteConfig} from 'angular2/router';
  
  @RouteConfig([
      { path: '/Step1', name: 'Step1', component: Step1 }
  ])
  @Component({
      selector: 'step1',
      template: `&lt;div&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;`
  })
  export class Step1 {
  
  }
  </code></pre>
  
  <p>What is going on? why isn't this working?</p>
  
  <p><strong>Environment</strong></p>
  
  <ol>
  <li>Visual Studio 2015 update 1</li>
  <li>ASP.NET 5 and MVC 6</li>
  <li>DNX 4.5.1 and 5.0</li>
  <li>Angular2 Typescript</li>
  </ol>