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

Question

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 1

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