Table of Contents
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
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;}
}
}
