Two way data binding in Angular2

Custom define Two-Way Data Binding in Angular 2

There are three types of data bindings in Angular 2, they are as follows:

1.Interpolation
2.Event Binding
3.Property Binding

Angular does not have a build in two way data binding.it can be reached by using nModel directive. Interpolation used Double curly braces contain template statements which grant us to read primitive or object values from the component.

 model with two-way data binding 

Two-way data binding combines the input and output binding into a single system using the ngModel directive.
Angular 2 gives us a directive ngModel to achieve two-way data binding. It is very simple  and direct to use ngModel directive.
Example.
import {Component} from '@angular/core';
@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
  <div class="container id">
     <input [(ngModel)]='name' />
      <br/>
      <h1>hii{{name}}</h1>
  </div>
  `
})
export class AppComponent{
}

Two-way data binding without ngModel

To know ngModel directive working, let us see how we can chase two-way data binding without using ngModel directive. To do that, we need to use

Data binding to bind define to value property of the input element. 
Event binding to emit input event on the input element. Using event binding, input event would be bind to an define.

Custom two-way data binding angular2

We should be very focused whether to create a custom two-way data binding or rely on the ngModel directive. Do not have to create custom two-way data binding regularly. it is superior to have steps to build a custom two-way data binding. To create a custom counter component with two-way data binding enabled. 
 follow the 3  steps:
Step 1

 To Create a component with two buttons and increment and decrement method.  
over we have created an ideal simple component to increment and decrement the count.  use this component inside another component, after all, two-way data binding is not enabled on this component. we need to use Input and Output properties.

 Step 2

Create a getter with Input property and return count. actually, it is applied with Input decorator, consumer of this component can bind this value using the property data binding.

Step 3

To create two-way data binding we need to have an event of the type EventEmitter. This event emitter is attributed with output decorator it can be emitted to the component. We design event object in the constructor of the component.