Data Binding and different Type of Data Binding in Angular

Data binding basically means to bind the data from view(Template) to controller(Component class) and vice versa.

As the name suggest it is Interacting with data

Data binding defines how the data flows and how the data gets updated based on buisness logic.

Data Binding

Types of Data Binding:

There are four type of Data Binding

1. Interpolation
2. Property Binding
3. Event Binding
4. Two way Data Binding

Type of Data Binding

Interpolation

Interpolation is basically unidirectional flow of data(function or properties). It is one of the way to display data or we can say that it is used to bind a data or value to UI(user interface) element.

How to interpolate the data or value?

To interpolate data or value we put element in double curly braces in your HTML file.

syntax :{{propertyname}}.

Example:

App.component.html

App.component.ts

Property Binding

Property binding is another way to set properties of element with variable name in your HTML file. It is alternative to Interpolation and common way of binding data from component to our HTML page.It is unidirectional.

Property Binding is done by using Square braces([]).

App.component.html

App.component.ts

Event Binding

In event data binding a user expects a UI to respond to her/his actions on the page. Every such action would trigger an event on the page and the page has to respond by listening to these events like clicks, keystrokes, change events, etc.

Angular gives you third type of binding to capture events raised on template in a component class. For example, there’s a button on the component template and, on click of the button, you want to call a function in component class. You can do this using Event Binding.

Events are actions which occur as a result of the user or another source.

Often times we need communication from DOM to component because the user only interacts with the DOM and not the component, So any interactions with the DOM like button click needs to be communicated with the component so the necessary action can be completed.

Event Data Binding is done by round brackets().

Here is illustration:

App.component.html

App.component.ts

Two way Data Binding

The combination of property binding and the event binding is called the two way data binding. two-way databinding, automatic synchronization of data happens between the Model and the View. Change is reflected in the both components. Whenever you make changes in the model it will reflected immediately in the view component.

Angular provides us a directive, ngModel, to achieve two-way data binding.

Everyone probably familiar with [(ngModel)] and its world-famous “banana in a box”

For example:

App.component.html

App.component.ts

Output

Two-way data binding commonly used by the Angular Developers.

Thanks you :)