Angular 2 ngModel two way binding

Question

I was trying to test the two way binding of Angular2 but I'm always getting this

error: Can't bind to 'ngModel' since it isn't a known property of 'input'.

How can I solve this ?

import { Component } from '@angular/core';


@Component({
  selector: 'impure-pipe',
  template: `<input type="text" [(ngModel)]='a'> <p>{{ a| calcPipe:b}}</p>`
})
export class PipesAppComponent {

  a: number = 2;
  b: number = 2;

}

Answer 1

As it says on this page Template Syntax from the Angular 2 web site

Before we can use the ngModel directive in a two-way data binding, we must import the FormsModule and add it to the Angular module's imports list. Learn more about the FormsModule and ngModel in the Forms chapter.

Do you have the FormsModule imported in your 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
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 2

Make sure to import the FormsModule.

Answer 3

Have you added a definition of FormsModule in app.module.ts?

import { FormsModule } from '@angular/forms';


@NgModule({
  imports: [
    FormsModule
  ],