Can't bind angular2 directive on native element

Question

I try to create a simple angular2 component, and I have an error when binding directive to a native DOM element.

For example:

/// <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 {    }

=> Can't bind to 'routerLink' since it isn't a known property of the '<a>' element and there are no matching directives with a corresponding property.

What did I do wrong?

Answer 1

• As @EricMartinez said, "directives" is a "View" property
• As @dSebastien said, "router-link" became "routerLink"
• As @pardeep-jain said, "angular2/angular2" became "angular2/core", "View" annotation is being removed, no need of the typings line

Here is the right 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 {    }