Data Binding - AngularJS Data Binding example
The synchronization between the view code and the model is known as data binding in AngularJS. When data in the model is updated, the view is updated to reflect the change and vice versa. It takes place instantly and automatically, ensuring that the model and the view are constantly updated.
Data binding is a unique and strong characteristic in web application development. It serves as a link between the application's UI and business logic. AngularJS uses the Two-Way data binding method.
Two-way Data Binding method
In Angular applications, data-binding synchronizes data between the model and view components. The "mg-model" directive helps to operate two-way data binding method.
You can use data binding to make your application's model the only source of truth. The model is always projected onto the view. If the model modifies, the view changes its parameters and vice versa.
Syntax
The following method shows how to bind application data with the view model. There are two ways to use data binding.
Method1
The following syntax shows you data binding with basic angular Js format.
|
<div ng-app=""> <input type = "text" ng-model = "userdata" placeholder = "Enter Username here"> <p> output value: {{userdata}} </p> </div> |
Description
-
The {{ }} binds the value of the input tag. The double curly bracket is necessary to bind the ng-model's value.
-
The "ng-model" is required for binding input data with the display page.
-
We cannot use AngularJS functions and directives without the "ng-app" directive.
Method2
The following syntax shows you data binding with the "ng-bind" directive.
|
<div ng-app=""> <input type = "text" ng-model = "userdata" placeholder = "Enter Username here"> <p> output value: <span ng-bind = "userdata"></span> </p> </div> |
Description
-
The "ng-bind" directive binds the value of the input tag.
-
The "ng-model" is required for binding input data with the display page.
Examples
The following two examples show working procedure of the data binding in AngularJs.
Example #1: Data binding with double curly bracket example shows below.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <div ng-app=""> <b> AngularJS Data Binding. </b> <p> UserName : <input type = "text" ng-model = "userdata1" placeholder = "Enter Username here"></p> <h4> Hello {{userdata1}}!</h4> </div> </body> </html> |
Output
The image shows the input data display on a web page as an output.
 |
Example #2: Data binding with the "ng-bind" directive example shows below.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <div ng-app = ""> <b> AngularJS Data Binding. </b> <p> UserName : <input type = "text" ng-model = "userdata1" placeholder = "Enter Username here"></p> <h4> Hello <span ng-bind = "userdata1"></span>!</h4> </div> </body> </html> |
Output
The image shows the input data display on a web page as an output.
 |
Example #3: double parameters data binding example shows below.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <div ng-app=""> <b> AngularJS Data Binding. </b> <p> FirstName : <input type = "text" ng-model = "userdata1" placeholder = "Enter Username here"></p> <p> LastName : <input type = "text" ng-model = "userdata2" placeholder = "Enter Username here"></p> <h4> Hello <span ng-bind = "userdata1+ ' ' +userdata2"></span> !</h4> </div> </body> </html> |
Output
The image shows the double input data displayed on the web page simultaneously as an output.
 |
Summary
Data binding is the essential method for developing web applications. It uses to connect user input and display pages on a single page