Two-Way Data Binding | ANGULARJS
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!!!
Prerequisite
An understanding of Javascript is definitely required, as is a basic – but not advanced – 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 model and view. Whenever the View changes it will be reflecting the model and 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.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs Two way Binding Example
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
<script type="text/javascript">
var myModule = angular.module('AppHks', []);
myModule.controller('MainCtrl', function ($scope) {
$scope.name = 'Hemant';
});
</script>
</head>
<body ng-app='AppHks'>
<div ng-controller='MainCtrl'>
<div>
Enter Name Here:
<input type='text' ng-model='name' />
</div>
<div>
<p>
<h3>Welcome {{name}}</h3>
</p>
<p>thank you for visiting!!!</p>
</div>
</div>
</body>
</html>
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.
Conclusion
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