AngularJS Data Binding

Sunil Sharma
Last Updated: May 13, 2022

Introduction

We have many vital concepts in AngularJS, and one of them is data binding. We can understand data binding as a procedure to establish data synchronization between the view and business layer of your AngularJS application. 

 

Data binding is automatic and using this we can wire the UI of our application with the data of our application. Whenever we make some changes in the model, these changes will automatically reflect in our view, and the vice-versa of this line is also true. This happens so fast that you will feel like the changes are done in real-time.
 

In this article, we’ll cover everything about data binding in detail. So, let’s get started!

Relationship between Model and View

The data binding processes work between the model and view components to synchronise data. In Angular, the model is treated as the application's source, and the view is the model's projection.

 

The diagram below shows the primary relationship between the model and the view and how they are interrelated.

Data Binding and Directives

The directive is something that makes binding in AngularJS possible. The directive which is used for binding data in AngularJS is ng-model. This directive binds the value of text area, text field, or any other input field with the HTML element.

 

Let’s see the code snippet performing data binding in AngularJS.

 

In the example below, the expression inside the double curly braces is {{name}}. The expression {{name}} is bound with the ng-model directive (“name”). 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapi.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" >
<p>Write something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p>Your name is: {{ name }}</p>
</div>
</body>
</html>

Output:

Name:

Your name is : 

Output when you type something in the text box:

Name: Sunil

Your name is: Sunil

Types of Data Binding in AngularJS

There are two types of bindings in AngularJS. These are as follows:

 

  1. One way Data Binding
  2. Two-way Data Binding

Let’s understand these two bindings one by one.

One way Data Binding in AngularJS

In One-Way data binding, the view (UI part) does not automatically update when the data model changes, and we must write custom code to make it update every time. It is not a synchronisation process, and it will process data in the manner depicted in the image below. 

 

In one time-binding, we have interpolation binding and property binding. Both are explained below.

1.) Interpolation binding

The interpolation technique is used to bind value and its corresponding UI element.

Interpolation binding works one way. When the field value is bound using interpolation changes, then it is updated on the page as well. It cannot change the value of the field. 
 

A Component class object is used as the data context for the component template. So the value which we want to bound on the view has to be assigned to a component class field.

Syntax: class="{{variable_name}}"

Example:

app.component.html

<h5>Result of 10 and 15 with Interpolation is {{10+15}}</h5>
<h5>Result of 10 and 15 without Interpolation is 10+15</h5>
<h2>{{val}}</h2>

app.component.ts

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 val: string;
}


Output:

Result of 10 and 15 with Interpolation is 25

Result of 10 and 15 with Interpolation is 10+15

CODING NINJAS

2.) Property binding

Using this binding, we can bind values with the DOM properties of HTML elements. Property binding is also a one-way binding technique. Property bindings are calculated on every browser event, and every change made to the objects is applied to the properties.


DOM properties and HTML attributes of the HTML elements shouldn’t be confused. Every HTML element is considered a DOM object, and every attribute of the HTML element is represented as a DOM property.

Syntax:  [class]="variable_name"

Example

app.component.html

<p>Property Binding</p>
<input type="text" ng-bind="{{ CN }}"><br>
<h5>Learn more about Property binding on {{ CN }}</h5>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'CN';
  classtype ="text-danger";
  CN= "CODING NINJAS";
}

Two Way Data Binding in AngularJS

When the data model changes in two-way data binding, the view (UI part) automatically updates. Its synchronisation processes and two-way data binding will look like the image below.


Using the ng-model directive, we can achieve this two-way data binding. When we use the ng-model directive in an HTML control, the value is automatically updated whenever the data in the input control changes.

 

Event binding is a type of two-way data binding in AngularJS.

Event Binding

Event binding helps you listen and respond to user actions such as clicks, keystrokes, touches, and mouse movements.


Event binding syntax consists of a targeting event name within parentheses to the left of an equal sign. A quoted template statement is present to the right of the event name. In the given syntax example, the event name is "click," and the template statement is onSave().


Syntax: <button (click)="onSave()">Save</button>


After each button’s click, the event binding calls the component's onSave() method. Let’s take a look at another example.

Example: Handling Button Click Event in Component

@Component({
  selector: 'event-demo,
  template: '<button (click)="onShow()" >Show</button>'
})
export class EventBindingDemoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  onShow() {
    alert('Show button clicked!');
  }

}

Frequently Asked Questions

 

1.) What is data binding in AngularJS?

      Answer- Automatic synchronization of data between view and model components is known

      as data binding. 


2.) What do you mean by scopes in AngularJS? 

      Answer-  Scopes are the model referring objects. They act as glue between view and  

      controller. 


3.) Can we create reusable components in AngularJS?

      Answer- Yes, we can create reusable components in AngularJS.


4.) What do you mean by Model in MVC? 

      Answer- The model component stores data with related logic transferred between controller

      components or any affiliated business logic.


5.) What do you mean by View in MVC? 

      Answer- View is responsible for displaying the complete or a part of the data to the user.

Key Takeaways

This article shared some exciting information regarding Data Binding in AngularJS and its types: One and two-way data binding. We understood syntax and examples of Data binding. I hope you liked our explanation.

 

Also, if you are preparing for interviews, you can visit this JavaScript interview question blog.

Happy Reading!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think