Data Binding in Angular

Data binding in Angular

In this article, I am going to discuss the data binding in Angular Application. The Data binding in Angular is one of the most important features in Angular Application which allows us to communicate between the component and its view.

Whenever we want to develop any web application, then we need to keep the focus on two fundamental things i.e. The Data and the UI (User Interface) and it is more important for us to find an efficient way to wire them (Data and UI) up together.

Whenever we develop a rich user interface applications, then the data can arrive in several chunks and we need to update the user interface with the latest data.

Now a day most of the front-end development uses JavaScript frameworks like Angular which does a lot of work for us. These Frameworks takes the responsibility of synchronizing the data and the user interface. The technique which they use for synchronizing the data and the user interface (called a view) is called Data Binding.

Data Binding in Angular

What is Data Binding in Angular?

The Data Binding in Angular is a process that creates a connection to communicate and synchronize between the application’s user interface and the data which means when the data changes its value, then the UI elements that are bound to the data, will also automatically change. So, the Angular handles data binding by synchronizing the state of the view with the data in the component.

There are two types of Data binding in Angular are as follows

One-way Data Binding- where a change in the state affects the view (i.e. From Component to View Template) or change in the view affects the state (From View Template to Component).

Two-way Data Binding- where a change from the view can also change the model and similarly change in the model can also change in the view (From Component to View Template & also From View template to Component).

The following types of bindings are supported by Angular:
  1. Interpolation
  2. Property Binding
  3. Attribute Binding
  4. Class Binding
  5. Style Binding
  6. Event Binding
  7. Two-way binding

We will discuss each of these bindings in details with the example in our upcoming articles. In the next article, I will discuss Interpolation in the angular application.

SUMMARY:

In this article, I try to explain Data Binding in Angular I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *