What is “Data Binding” in Angular and How it Works?

Rishabh Jain Aug 17th, 2020

What is data binding ?

Data binding is a mechanism which create a sync between the model and the HTML view, the application becomes easier to write, read and maintain. The framework can do rest of our task, we just simply have to declaring the bindings between binding source and target the HTML elements.

Data binding can be grouped into three categories according to the direction of data flow :

  • Interpolation
  • Event
  • Two-way Binding

Interpolation

In interpolation we use curly braces {{}} these two curly braces help in data binding. The variable referred as {{title}} is in the HTML file and the value of this title is initialized in the type script file, when we host this app the value of the title which was given in the ts file will be displayed on the page as shown in output.

Example of interpolation:
HTML:

{{title}}

Typescript:

import {component} from ‘angular/core’;
@Component({

selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
}
title = ‘Data binding’;

Event Binding

When we perform some kind of action or when a user interact with a web-page/application in form of click of buttons, text inputs or mouse over it creates an event which need’s to be handle. This is why event binding is needed. Here’s a example to understand it better. Here when we click the login button the value on the ts file which is given to the login function will be logged on to console as shown in output

Example of event binding:
HTML :

Ts file:

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {

constructor(r) {}

ngOnInit() {}

loginUser(){
console.log(“logged in”)

}
}

Two-way Data Binding

Two-way data binding is the helps in exchange of data from view to component and vise versa. Basically it helps in creating communication bidirectionally. It is one of the most important binding in angular. This method uses the ngModal angular directive to achieve binding and to use ngModal we have to import the form module from the angular/forms in the app.module.ts file. This FormsModule contains the ngModal directive. [(ngModule)] this is how it is used in html

Example of two-way data binding
HTML:

Ts file:

import { Component } from ‘@angular/core’;
import { Router } from ‘@angular/router’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
username:string;
}
Here is a combined example of all the binding to understand it better. we have created a login page with validation. This might help in understanding it in a much better way the more you do the more you learn.

Data binding example with all its type :

HTML file:

Login

{{emailError}}
{{passwordError}}

TS file:

import { Component } from ‘@angular/core’;
import { Router } from ‘@angular/router’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’]
})
export class AppComponent {
title = ‘Data binding’;
userName: string = null;
password: string = null;
emailError:string;
passwordError: string;
passwordhide:boolean = false;
emailhide:boolean = false;
emailRegex: any = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
constructor(private router: Router) {}
ngOnInit() {}
loginUser(){
console.log(“logged in”)
this.validate();
this.validatepassword();
}
validate() {
if (this.userName === null || this.userName === “” ){
this.emailError = “*Please Enter username”;
this.emailhide = true;
}else if (this.emailRegex.test(this.userName) === false){
this.emailError=”*invalid email”;
this.emailhide=true;
}else{
this.emailhide = false;}
}
validatepassword(){
if (this.password === null || this.password === “” ){
this.passwordError =”*Please Enter Password”;
this.passwordhide = true;
}else if (this.password.length <= 8 ){
this.passwordError=”*Invalid Password”;
this.passwordhide = true;
}else {
this.passwordhide = false;}
}
}

Rishabh Jain - Director, Product Development, Enveu
Rishabh Jain is one of the co-founders and heads the Product Development at Enveu. A tech evangelist and deep tech advocate, he has been working in the Technology space, being part of many Big Data and IoT initiatives for over 10 years.

Add a Comment

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

Looking for Streaming Solutions?

  • Go-Live on 12+ platforms
  • Zero Revenue Share
  • Multiple Monetization Models
  • 50+ Integrations

get a demo today

Take control of your digital media strategy.
Contact us for a no-obligation demo of the Experience
Cloud, tailor-made for you!

    By Continuing, you agree to our Terms & Conditions and Privacy Policy