Angular 2 - Data Binding

angular2

// Angular 2 - Data Binding:

In the component's template (view), the double curly braces tells Angular to 
read the data from the component and render the data.  This is the 
"interpolation" form of one-way data binding.

The problem with one-way data binding is that when we change the data for a 
field using a form, the new data for that field is not reflected in other parts
of the page.  For that, we need to use two-way data binding.  But before we can
use two-way data binding for form inputs, we need to import the FormsModule. 
We add it to the NgModule decorator's imports array.  This contains the list
of external modules used by our application.  Now we have included the forms
package which includes ngModel:

// 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 { }

Let’s update the template to use the ngModel built-in directive for two-way 
binding.  Replace the <input> with the following HTML:

<input [(ngModel)]="hero.name" placeholder="name">

Notice that with two-way data binding, we do not use the double curly braces
anymore.  Instead, we use [(ngModel)] and double quotes.  The ngModel directive 
propagates changes to every other binding of the model property.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License