Getting Started with Angular - Second Edition

Two-way data binding with Angular

One of the most famous rumors about Angular 2 was that the two-way data binding functionality was removed because of the enforced unidirectional data flow. This is not exactly true; the Angular's form module implements a directive with the selector [(ngModel)] (we'll also refer to this directive as NgModel, because of the name of its controller), which allows us to easily achieve data binding in two directions: from the view to the model and from the model to the view.

Let's take a look at the following simple component:

// ch6/ts/simple-two-way-data-binding/app.ts import {Component, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {FormsModule} from '@angular/forms'; ...