In this post I cover the principle of
two-way binding with sample example in an AngularJS environment. But, before diving directly to
two- way binding I wanna give a short introduction to
Data Binding in AngularJS.
After reading it for the first time it feels like it’s a complicated concept. But good news, it isn’t. let's seeeeeee!!!
understanding of AngularJS.
What is Data Binding?
Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. The way that AngularJS implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. --AngularJs Docs
Two-Way Data Binding
Two-way binding just means that:
- When properties in the model get updated, so does the UI.
- When UI elements get updated, the changes get propagated back to the model.
So basically it provides the bi-directional synchronization between the View and the Component.
Two-Way Data Binding means that the synchronization process works both ways. In AngularJS, when we create a
model and set them on to our
$scope object followed by entering the UI components(HTML) to these models AngularJS will establish
Two-Way Binding between
view. Whenever the
View changes it will be reflecting the
vice-versa. Let's try to get a closer look using the image given below ...
For a quick reference I am mentioning a sample code (given below) which may help you to understand the concept of two way data binding in Angularjs.
If you observe above snippet we have defined
ng-model objective to HTML control and after that used same
ng-model value to show input control value. Here whenever we change input control value automatically the appearance value also will get changed.
I have also created a demo on codepen for better understanding. Hope you guys will understand.
Two-Way Binding allows the data model to serve as an atomic unit that the view of the application can always depend upon to be accurate.
With the use of this feature your application can greatly simplify its presentation layer, allowing the UI to be built off of a cleaner, less-destructive approach to DOM presentation. While it isn’t useful in every situation, the two-way data binding AngularJS provides can greatly ease web application development, and reduce the pain faced by your front-end developers.
Hope this was helpful.
Like this article? Follow @hemantjava on Twitter