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?

Hey @tzi The directives property must go in the View annotation. — Eric Martinez

tzi tzi · Accepted Answer · 2015-08-28T13:04:04

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

Can't bind angular2 directive on native element

2 Answers