Different Types Of Data Binding In Angular

Introduction

 
This article will explain to you different types of data binding in Angular. We will discuss each with examples in upcoming articles. For now, let us learn all about data binding in Angular. The first question that comes to mind is:
 

What is data binding?

 
Data binding is a process that creates a connection between the application’s UI and the data. When the data changes its value, the UI elements that are bound to the data will also change.
 

What are the types of data binding in angular?

 
There mainly two types of data binding in angular
 
One way data binding
 
One way data binding is a change in the state affects the view from component to view template or change in the view affects the state from view template to component.
 
Two-way data binding
 
Two-way data binding is a change from the view can also change the model and similarly changes in the model can also change in the view from component to view template, and also from view template to the component.
 
There are several ways to bind data between components and view in Angular.
  1. Interpolation
  2. Property binding
  3. Class binding
  4. Style binding
  5. Attribute binding
  6. Event binding
  7. Two-way binding
Whenever we want to develop any web application, then we need to focus on two fundamental things, the Data and the UI, and it is more important for us to find an efficient way to wire those Data and UI up together.
Nowadays most front-end development uses JavaScript frameworks like Angular which does a lot of work for us.
 

Summary

 
In this article, I have covered data bind and their types in Angular applications. I hope you understand. I will cover each type in the upcoming article will show more examples which will be helpful for both freshers and experienced developers.