data-bindingtypescriptangular2-way-object-databinding

Angular 2 two way binding using ngModel is not working


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);

Solution

  • 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