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, Aug 28 '15 at 01:18

score 11 · Accepted Answer · edited Mar 23 '16 at 22:49

11

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

edited Mar 23 '16 at 22:49

gsamaras

71,951
46
188
305

answered Aug 28 '15 at 13:04

tzi

8,719
2
25
45

5

Note that with the beta, router-link becomes routerLink (same for ngFor, ngIf, ...) – dSebastien Dec 20 '15 at 11:14

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

As of Angular2 is in beta now so there are lot of changes has been made few of them here regarding this question may help to someone.

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

changed to import {Component, View } from 'angular2/core' for list of all imports according to beta see here https://stackoverflow.com/a/34697758/5043867

(in most cases there is no need to use view annotation because all the functionality of view annotation is gets included in Component annotation).

no need to write typings line on the top of component because typing are included by default by angular team https://github.com/angular/angular/blob/master/CHANGELOG.md#200-alpha42-2015-10-13
router-link changed to routerLink

`@View()` annotation is being removed. – Günter Zöchbauer Mar 12 '16 at 17:19 — Günter Zöchbauer, Mar 12 '16 at 17:19

Can't bind angular2 directive on native element

2 Answers2

Linked