admin

02 April 2018

No Comments

Home AngularJS

Two Way Data Binding in AngularJS

Two Way Data Binding in AngularJS

Today let’s learn Data Binding in AngularJS. At the movement, you are thinking what is Data Binding? How is it working? What are the benefits of it? Don’t worry, I will give all the answers. Let’s start with the first question.

Note that, this tutorial is not on basic of Angular JS. The explanation is a concern to the topic only.

What is Data Binding in AngularJS?

Data binding is a synchronization process between MODEL and VIEW. That means if the value of the MODEL is changed, the value of VIEW is automatically updated. Vice Versa, if the value of VIEW is changed, MODEL has updated automatically. This kind of binding is known as Two Way Binding. Let’s understand all this with an example

I have a textbox, in which I am capturing user’s name and have a label which prints the name.

Step-1: Create an HTML project
Step-2: Import angular.min.js file
Step-3: “myBindingApp” module is created
Step-4: Declared application as angular application and assign a module to that.

HTML Code

    1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.  <title>Data binding in AngularJS</title>
5.  <meta charset="utf-8" />
6.  </head>
7.  <body>
8.  <div ng-app="myBindingApp">
9.  Enter your Name: <input type="text" ng-model="userName" />
10. <h3 ng-if="userName != null">Hello, {{userName}}</h3>
11. </div>
12. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
13. <script>
14. var app = angular.module("myBindingApp",[]);
15. </script>
16. </body>
17. </html>

Explanation of Code

After you run this application, when I entered some text, the exact value is updated to the label. Let’s trace this application.

  1. When the application is run, a text box appears on the screen.
  2. When we enter a text“Joy”, immediately our model “userName” is updated.
  3. When ourmodel is modified, it automatically assigns an updated value to the <h2> tag
    1. Main benefit of AngularJS is Two Way Binding so most of the industries prefer to develop their application in AngularJS. AngularJS applications have become more popular.

      Author: admin

Leave a Reply

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