Cannot bind angular2 directive to inline element

Question

I am trying to create a simple angular2 component and I have an error while binding the directive to my own DOM element.

For instance:

/// <reference path="../../typings/_custom.d.ts" /> import { Component, View } from 'angular2/angular2'; import { RouterLink } from 'angular2/router'; @Component({ selector: 'my-component', directives: [RouterLink] }) @View({ template: ` <a [router-link]="['/page']">test</a> ` }) export class MyComponent { } 

=> You cannot bind to 'routerLink', because this is not a known property of '<a>' and there are no corresponding directives with the corresponding property.

What have I done wrong?

Answer 1

• As @EricMartinez said, “directives” are a “Preview” property
• As @dSebastien said, "router-link" became "routerLink"
• As @ pardeep-jain said, "angular2 / angular2" became "angular2 / core", the annotation "View" is removed, there is no need for a sample line

Here is the correct code:

 import { Component } from 'angular2/core'; import { RouterLink } from 'angular2/router'; @Component({ selector: 'my-component', directives: [RouterLink], template: ` <a [routerLink]="['/page']">test</a> ` }) export class MyComponent { } 

Answer 2

As with Angular2, it is now in beta testing, so there are many changes that have been made by few of them in this matter that may help someone.

• import { Component, View } from 'angular2/angular2'

  changed to import {Component, View } from 'angular2/core' for a list of all imports according to the beta version see here fooobar.com/questions/240426 / ...

(in most cases, it is not necessary to use view annotation, since all the functionality of the view annotation is included in the component annotation).

• there is no need to write a typing line at the top of the component, because input is enabled by default with the angular command https://github.com/angular/angular/blob/master/CHANGELOG.md#200-alpha42-2015-10-13

• router-link changed to routerLink