Best resource for Online free Education
In this Video, I am going to discuss Data Binding in Angular Application in detail. Please read our previous Video 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 Video, you will understand the following pointers in detail.
- Why do we need Data Binding?
- What is Data Binding in Angular?
- 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 (Components 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.
Types of Data Binding in Angular:
There are two types of Data binding available. They 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 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:
We will discuss each of the above bindings in angular applications with examples from our next Videos. In the next Video, I am going to discuss. Here, in this Video, I try to give an overview of Data Binding in Angular Application. I hope this Video will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this Video.