Data Binding in Angular

Data Binding in Angular Application

In this article, I am going to discuss Data Binding in Angular Application in detail. Please read our previous article where we discussed the different options to Styling Angular Components. Data binding is one of the most important features provided by Angular Framework which allows communicating between the component and its view. So, at the end of this article, you will understand the following pointers in detail.

  1. Why do we need Data Binding?
  2. What is Data Binding in Angular?
  3. Types of Data Binding
Why do we need Data Binding?

Whenever you want to develop any data-driven web application, then as a developer you need to keep the focus on two important things i.e. Data and the UI (User Interface) and it is more important for you to find an efficient way to bind them (Data and UI) together. Again, the data can arrive in several chunks and you need to update the user interface with the latest or updated 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 angular framework provides one concept called Data Binding which is used for synchronizing the data and the user interface (called a view).

What is Data Binding in Angular Application?

In Angular, Data Binding means to bind the data (Component’s filed) with the View (HTML Content). That is whenever you want to display dynamic data on a view (HTML) from the component then you need to use the concept Data binding.

Data Binding is a process that creates a connection to communicate and synchronize between the user interface and the data. In order words, we can say that Data Binding means to interact with the data and view. So, the interaction between the templates (View) and the business logic is called data binding.

What is Data Binding in Angular Application?

Types of Data Binding in Angular:

There are two types of Data binding available. They are as follows

  1. 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).
  2. 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 and also From View template to Component).

In order to understand this better and remember, please have a look at the following image which describes the classification of Data Binding.

Types of Data Binding in Angular Application

Examples of Angular Data Bindings:
  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 the above data bindings in angular applications with examples from our next articles. In the next article, I am going to discuss Interpolation in angular application. Here, in this article, I try to give an overview of Data Binding in Angular Application. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.

2 thoughts on “Data Binding in Angular”

Leave a Reply

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