What is two way data binding in angular js ?

Follow on LinkedIn

Two way data binding keeps the model and view in sync at all times, i.e a change in model, updates the view and a change in view, updates the model.

Binding expressions update the view when model changes.

Let’s understand with code.

<!DOCTYPE html>
<html>
<head>
    <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>
    <script>
        var app = angular.module(‘newApp’, []);
        app.controller(‘newCtrl’, function($scope) {
            $scope.name = “John”;
            $scope.age = 25;
        });
    </script>
</head>    
<body>
<div ng-app=“newApp” ng-controller=“newCtrl”>
 Name: <input type=“text” ng-model=“name”><br>
 Age: <input type=“number” ng-model=“age”><br>
<br>
Name: {{name}}<br/>
Age : {{age}}
</div>
</body>
</html>

So in this example when user enter in input field for entering name and age, below those input fields name and age automatically changes and update on UI or view.

So any change inside input field or any change in model, changes the view at same time. Output of this code will show you the result on browser.

This is two way binding in angular js if you like the post please share with your friends.

Related Posts

Leave a Reply

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

×