zero_coding zero_coding - 24 days ago 15
Dart Question

Can't bind to 'ngModel' since it isn't a known native property or known directive

I am trying to learn angular2dart and follow the tutorial from anguar2dart site.

Consider following code:

import 'package:angular2/core.dart';

class Hero {
final int id;
String name;
Hero(this.id, this.name);
}

@Component(
selector: 'my-app',
template: '''
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>'''
)
class AppComponent {
String title = 'Tour of Heroes';
Hero hero = new Hero(1, 'Windstorm');
}


When I compiled this, it shows me the error message:

Build error:
Transform TemplateCompiler on Sample|lib/app_component.ng_meta.json threw error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known native property or known directive. Please fix typo or add to directives list. ("
<div>
<label>name: </label>
<input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
</div>"): AppComponent@5:15


What am I doing wrong?

Answer

It seems you are missing transformers for common directives in your pubspec.yaml file.

Check https://github.com/angular-examples/toh-1/blob/master/pubspec.yaml it contains following transformers angular section:

transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart
Comments