Data Binding in Angular 2.

In this article, We will discuss about Data Binding in Angular 2.

The relation between Component variable and template[view] is called as data binding.

The main advantage of data binding is Component var value will be given to template and vice versa without manual coding.

Angular 2 supports two type of data binding:-

i/ one way data binding

ii/ two way data binding

i/ one way data binding:-

-----------------------------

The data flow from Component variable to template[view] or from template[view] to component variable is called as one way data binding.

One way data binding can be implemented in 3 ways:

a/ Interpolation

b/ Property Binding

c/ Event Binding

a/ Interpolation:-

--------------------

Providing Component variable value to a string using an expression is called as "Interpolation".

The expression requires double curly braces.

Example:- {{prodid}}

b/ Property Binding:-

-------------------------

Providing Component variable value to html element property is called "Property Binding".

Property binding can be implemented using square bracket [].

Example:- <span [innerHtml]="prodid">

c/ Event Binding:-

----------------------

Providing Component class method to template Control event is called as "Event Binding".

This can flow data from Template to Component.

Event Binding can be implemented using Parenthesis ().

Example:- <button (mouseenter)="m1('Save')">

ii/Two Way Data Binding:-

--------------------------------

Synchronizing data between Component and template is called "Two way data binding".

This will flow data from Component to template and Vice-Versa.

Two way data binding is a combination of Property Binding and Event Binding.

Example:- <input [(ngModel)]="price">