Demystified Angular Databinding

Srashti Jain

Print 3 min read

22 Jul 2022

Beginner

8.39K Views

In any web application, data binding is the most important part. To understand the importance of data binding let’s have a quick look into the basic components of an angular application.

An angular application is made up of declarable classes which are components, directives, and pipes. However, angular components contain an HTML view, by which users can interact with the application. It mainly has two parts:

HTML Template

It contains a view for the component (HTML elements: input, select, button, etc.)

Component Class

It contains logic for components like classes, variables, functions, API calls, etc. So, in angular application – the interaction between HTML template and component class can be done very easily through data binding. Also, it provides us with a way to manipulate the DOM value dynamically.

Data binding direction

There are two ways in which data is bound, one is uni-directional and the other one is bi-directional but Angular technically only uses unidirectional data flow whereas Bi-directional flow is ultimately uni-directional. It happens in two applications of unidirectional flow, once for each direction.

Uni-directional data flow defines one-way interaction from top to bottom means either the component can send the data to the template or from the template emits an event to the component's business logic. Data changes within the scope of the template are not per-colated to the component class. Event emitting is a one-way transaction beginning from the template’s elements.

The Bi-directional triggers in both directions mean the changes to the data in the class logic or template HTML persist across each other whenever any specific value changes. The scope of the changes in the component’s view, and comprises the component’s class and templates together.

What is Data Binding?

A mechanism for binding data values to HTML elements and turning user activities into actions. Data-binding is responsible for data value updates.

There are different ways by which we can achieve data binding in angular:

Interpolation
Property Binding
Event Binding
Two-Way Binding

Angular Data Binding Syntax

Let’s try to understand all of this one by one:

Interpolation {{…}}

It’s used to weave string value into the HTML element. Use variable name inside the double curly-braces "{{ }}".

Example

<h1>Interpolation Example<;/h1> 
Name: {{name}} 
To pay: {{amount * 10}} 
<img src="{{imageUrl}}">

Property Binding […]

It’s used to set the property of the element to a component property value. Use square brackets “[]” to set property binding.

Example

<h1>Property Binding Example</h1>
<img [src]="imageUrl"> 
<button [disabled]="isUnchanged">Cancel is disabled</button>

Event Binding (…)

It’s used to set the event of the HTML element.

Example

<h1>Event Binding Example</h1> 
<button (click)="onSave()">;Save</button>

Two-way Binding [(…)]

It’s also known as Banana in the box "[()]" – the combination of property binding [ ] and event-binding ( ), said you can display the property and update the same whenever the user makes any changes. It can be done using ngModel.

Example

<input [(ngModel)]="name" >

Summary

Angular Databinding is the way to do interaction between the view and the class. It can be achieved by using Interpolation, Property Binding, Event Binding, and Two-way Binding. However, all of them are used for data binding but at different places. Angular training programs help you learn to build projects using web API ASP.NET MVC5 and node.js.