Angular 2 two way binding using ngModel is not working

Question

Can't bind to 'ngModel' since it isn't a know property of the 'input' element and there are no matching directives with a corresponding property

Note: im using alpha.31

import { Component, View, bootstrap } from 'angular2/angular2'  @Component({     selector: 'data-bind' }) @View({     template:`         <input id="name" type="text"              [ng-model]="name"              (ng-model)="name = $event" />         {{ name }}     `  }) class DataBinding {      name: string;      constructor(){         this.name = 'Jose';     } }  bootstrap(DataBinding); 

Answer 1

Angular has released its final version on 15th of September. Unlike Angular 1 you can use ngModel directive in Angular 2 for two way data binding, but you need write it in a bit different way like [(ngModel)] (Banana in a box syntax). Almost all angular2 core directives doesn't support kebab-case now instead you should use camelCase.

Now ngModel directive belongs to FormsModule, that's why you should import the FormsModule from @angular/forms module inside imports metadata option of AppModule(NgModule). Thereafter you can use ngModel directive inside on your page.

app/app.component.ts

import { Component } from '@angular/core';  @Component({   selector: 'my-app',   template: `<h1>My First Angular 2 App</h1>     <input type="text" [(ngModel)]="myModel"/>     {{myModel}}   ` }) export class AppComponent {    myModel: any; } 

app/app.module.ts

import { NgModule }      from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent }   from './app.component';  @NgModule({   imports:      [ BrowserModule, FormsModule ], //< added FormsModule here   declarations: [ AppComponent ],   bootstrap:    [ AppComponent ] })  export class AppModule { } 

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module';  const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); 

Demo Plunkr