Implementing simple two-way data binding with ngModel

Angular 2 still has two-way data binding, but the way it behaves is a bit different than what you're used to. This recipe will begin with a very simple example and then break it down into pieces to describe what it's actually doing.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/0771/.

How to do it...

Two-way data binding uses the ngModel directive, which is included in FormsModule. Add this directive to your application module:

[app/app.module.ts] 
 
import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {FormsModule} from '@angular/forms'; 
import {ArticleEditorComponent} from './article-editor.component'; 
 
@NgModule({ 
  imports: [ 
    BrowserModule, 
    FormsModule 
  ], 
  declarations: [ 
    ArticleEditorComponent 
  ], 
  bootstrap: [ 
...