Two-way Binding Angular 2/4

Two-way data binding means if any data related changes affecting the model are immediately propagated to the matching view,And if user makes any changes in view that immediately reflects in model.If you make any changes in data,that reflects in UI.
In Angular 2/4,data flow occurs in both directions,from the property to the input elements or Input elements to the property.

STEP 1:

• First you need to setup develop environment for Angular 2 and create a project by following the steps .

STEP 2:

• In your app.component.html

 <input [(ngModel)]="yourName" placeholder="name">  
 <h2>{{yourName}}</h2>  

STEP 3:

• Don't forget to import FormsModule in app.module.ts.Because ngModel is belongs to FormsModule.Else you will face an error in console
      Can't bind to 'ngModel' since it isn't a known property of 'input' 
• In app.module.ts

 import { FormsModule }  from '@angular/forms';  
 @NgModule({  
  imports: [  
   BrowserModule,  
   FormsModule   
  ]  
 })  

STEP 4:

• In your app.component.ts at class section you need to create a property in the name of "yourName".

 export class AppComponent {  
  yourName='TechBits';  
 }  

Now you can see the value of yourName in the textbox,If you change the value in textbox it immediately reflects in <h2>.