Firstly, we clear out our basic concepts, like what is data binding and what are the types of data binding etc.
What is data binding?
Data binding is a process of establishing the connection between View and Model to communicate or updating the data from View to model and from Model to View.
Type of binding
Data binding is of 3 types, as listed below.
- One time binding.
- One way binding.
- Two way binding.
One time binding
- In One time binding, the data is bound only once through the execution of application
- Value can't be changed after the data binding from Model to View.
![]()
Example
- <!DOCTYPE html>
- <html>
-
- <head>
- <title></title>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
- </head>
-
- <body>
- <div ng-app>
- <h1>one time binding in AngularJs</h1> enter you name:<input type="text" ng-model="name">
- <p>hello mr.{{::name}}</p>
- </div>
- </body>
-
- </html>
One way Binding
In One way binding, the data is bound in one direction, which means Model to View. If the Model is updated, then the View is also updated but if only the View is updated, no Model is updated.
Example
- <!DOCTYPE html>
- <html>
-
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
- </head>
-
- <body ng-app ng-init="firstName = 'Ajay'; lastName = 'Malik';">
- <strong>First name:</strong> {{firstName}}<br />
- <strong>Last name:</strong> <span ng-bind="lastName"></span>
- </body>
-
- </html>
Two way binding
In Two way binding, if the Model is updated, then View is also updated and vice versa
Example
- <!DOCTYPE html>
- <html>
-
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
- </head>
-
- <body>
- <div ng-app ng-init="name='Ajay Malik'">
- <h1>Two Way binding</h1> Enter your name<input type="text" ng-model="name">
- <p ng-bind="name">Hello Mr.</p>
-
- </div>
- </body>
-
- </html>