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';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
 selector: 'app',
 template: `
  <input type="text" [(ngModel)]="name">
  <div>{{name}}...