Data Binding in Angular

 Data binding is the communication b/w component & Document Object Model.

There are two types of binding in Angular and the one way binding consist three type.

Data Binding -------------|---  One Way Binding --- html is changed when we change in typescript code

                       -------------|---  Two Way Binding -- automatic synchronization of data happens b/w Model and View

Data Binding -------------|---  One Way Binding --------------- Interpolation

                                                                              --------------- Property

                                                                               --------------- Event

String Interpolation is a one way data binding techniques which used to output the data from typescript code to HTML template (view).

String Interpolation adds the value of a property from the component. {{ user.name }}

In property binding, we bind a property of  a DOM element to a field which is defined property in our component typescript code.

       <img [src] = "imageUrl" />

Event binding is used to handle event from DOM. Event (click, change, keyup ) binding calls the specifies method in the component.

In Two way Binding , property and event binding are combined together. if we change in the template then it will reflected in the component typescript code and vice-versa.

change in the template will directly reflected in component typescript code.

[(ngModel)] = "[imageUrl]"

The models are the classes that holds the data. (eg. a data contract to hold data return by the http service using @angular/http

We can create a new class that add methods and properties (logic ) then merge the model & class.

This is called viewModel. It can be used in our component.