Data Binding In Angular 8

Introduction

In this article, we will learn about Data Binding in Angular. As we know Data Binding is used for binding the data from View to Component or Component to View. In Angular, we have two different types of Data Binding for binding the data from Component.ts class file to Component.html or Component.html to Component.ts or Vice versa.

One way Data Binding

In one-way data binding, we have two different types of data binding that are binding of data from Component.html or View to Component.ts class file or Component.ts class file to Component.html.

We have different ways of binding the data from Component.ts class file to Component.html as shown below.

String Interpolation
Property Binding
Style Binding
Class Binding
Attribute Binding etc.

In order to pass the data from Component.html (View) to Component.ts or One-way data binding, we use Event Binding.

Another way to bind the data from Component.html or View to Component.ts or Component.ts to Component.html we use

Two-way Data Binding.

String Interpolation

In String Interpolation we bind the data from Component.ts class file to Component.html by using the expression in double curly braces. If we don't pass the data or the component's field in double curly braces then angular treat this as a string value and display the string value to the end-user.

For example,

Open the Component.ts file and place the below code.

export class Test3Component implements OnInit {
firstName: string = 'Khaja';
lastName: string = 'Moizuddin';
number1: number = 100;
number2: number = 200;
totalAmount: number = this.number1 + this.number2;
fullName: string = this.firstName + this.lastName;
fullNameVal:string;
totalVal:number;
csharpCornerURL: string = 'https://www.c-sharpcorner.com/members/khaja-moiz';
myImagePath: string = 'assets/Images/mvp1.jpg';
heightImg: number = 50;
widthImg:number = 50;
onButtonClick: string;
onDoubleClick: string;
getTotalAmount1() {
return this.number1 + this.number2;
}
getTotalAmount2() {
return this.totalVal = this.number1 + this.number2;
}
getTotalAmount3() {
return this.totalVal = this.totalAmount;
}
getFullName1() {
return this.firstName + this.lastName;
}
getFullName2() {
return this.fullNameVal = this.firstName + this.lastName;
}
getFullName3() {
return this.fullNameVal = this.fullName;
}
onBtnClick() {
return this.onButtonClick = 'Welcome ' + this.firstName;
}
onDblClick(){
return this.onDoubleClick = 'Welcome ' + this.lastName;
}
constructor() { }
ngOnInit() {
}
}

Now open the Component.html file and place the below code.

<h2>STRING INTERPOLATION</h2>
<hr>
<h3> firstName is:{{this.firstName}} </h3>
<h3> lastName is: {{this.lastName}} </h3>
<h3> fullName is:{{this.fullName}} </h3>
<h3> fullName1 is:{{this.getFullName1()}} </h3>
<h3> fullName2 is:{{this.getFullName2()}} </h3>
<h3> fullName3 is:{{this.getFullName3()}} </h3>
<h3> Number1 is : {{this.number1}} </h3>
<h3> Number2 is:{{this.number2}} </h3>
<h3> TotalAmount is:{{this.totalAmount}} </h3>
<h3> TotalAmount1 is:{{this.getTotalAmount1()}} </h3>
<h3> TotalAmount2 is:{{this.getTotalAmount2()}} </h3>
<h3>TotalAmount3 is: {{this.getTotalAmount3()}} </h3>

Here in the above code we used different ways of binding the data in String Interpolation, we used double curly braces for binding the data from component.ts to component.html with this it converts the field values as expression.

In the above we used fullName: string = this.firstName + this.lastName; or totalAmount: number = this.number1 + this.number2; which converts the values as an expressions and returns the result to the end user.

The output for String Interpolation is,

Property Binding

In Property binding, we bind the data from Component.ts to Component.html. The HTML elements property is bound with the values from Component.ts file using square brackets [].

For Example,

Now open the Component.html file and place the below code.

<span [innerText]='this.firstName'></span><br>
<span [innerHTML] = 'this.lastName'></span><br>
<span innerText = '{{this.firstName}}'></span><br>
<span innerHTML = '{{this.lastName}}'></span>

In the above code we used [innerHTML] and [innerText] which is nothing but property binding, here the values this.firstName, this.lastName is binded from the Component.ts file, the Output will be visible to the end user which will be placed in between the span tags.

<span [attr.innerText]='this.firstName'></span><br>
<span [attr.innerHTML] = 'this.lastName'></span><br>
<span attr.innerText = '{{this.firstName}}'></span><br>
<span attr.innerHTML = '{{this.lastName}}'></span>

With the above code, we used attr attribute which is nothing but attribute binding with property name which binds the Component's value to the DOM element. The output will not be visible to the end-user but the innerText and innerHTML property will be added to the span tags which can be shown below.

<a href="{{this.csharpCornerURL}}" target="_blank">CsharpCorner</a><br>
<a [href]='this.csharpCornerURL' target="_blank">CsharpCorner</a><br>
<a attr.href = '{{this.csharpCornerURL}}' target="_blank">CsharpCorner</a><br>
<a [attr.href]='this.csharpCornerURL' target="_blank">CsharpCorner</a><br>
<img src='{{this.myImagePath}}' height='{{this.heightImg}}' width="{{this.widthImg}}" /><br>
<img [src]='this.myImagePath' [height]='this.heightImg' [width]="this.widthImg"><br>
<img attr.src = '{{this.myImagePath}}' attr.height='{{this.heightImg}}' attr.width="{{this.widthImg}}"><br>
<img [attr.src]='this.myImagePath' [attr.height]='this.heightImg' [attr.width]="this.widthImg">

Here i have used different ways of binding the Component's value to the property href and src as shown in the above code.

The output for the above code is shown below.

Style Binding

Using Style binding we can set the style using ngStyle attribute by passing the value of the component.ts file. Here I am going to set ngStyle attribute with background color with two conditions that are if the condition is successful then I am going to display the background color with green and if the condition fails then I am going to display the background color with red.

Open Component.html file and place the below code.

<h2>NG STYLE WITH TRUE CONDITION</h2>
<h3 [ngStyle]="{'background-color': this.fullName == this.getFullName1()?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getFullName1() == this.getFullName2()?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getFullName3() == this.firstName + this.lastName ?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.totalAmount == this.getTotalAmount1() ?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getTotalAmount2() == this.getTotalAmount3()?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getTotalAmount3() == this.number1 + this.number2?'green':'red'}">NG STYLE WITH TRUE CONDITION</h3>
<h2>NG STYLE WITH FALSE CONDITION</h2>
<h3 [ngStyle]="{'background-color': this.fullName != this.getFullName1()?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getFullName1() != this.getFullName2()?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getFullName3() != this.firstName + this.lastName ?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.totalAmount != this.getTotalAmount1() ?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getTotalAmount2() != this.getTotalAmount3()?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>
<h3 [ngStyle] = "{'background-color': this.getTotalAmount3() != this.number1 + this.number2?'green':'red'}">NG STYLE WITH FALSE CONDITION</h3>

The output for the above code is shown below.

Class Binding

Using Class Binding we can set the ngClass attribute by passing the value of the Component.ts file. With ngClass attribute, we can set the class property of the HTML element and can set the CSS for the applied value for the ngClass attribute.

Open the Component.html file and place the below code.

NG CLASS EXAMPLE1: <input type="text" [ngClass]= 'this.fullName' [id]='this.firstName' [name]='this.lastName'/><br>
NG CLASS EXAMPLE1: <input type="text" ngClass= '{{this.fullName}}' id='{{this.firstName}}' name='{{this.lastName}}'/><br><br>
NG CLASS EXAMPLE2: <input type="text" [attr.ngClass]= 'this.fullName' [attr.id]='this.firstName' [attr.name]='this.lastName'/><br>
NG CLASS EXAMPLE2: <input type="text" attr.ngClass= '{{this.fullName}}' attr.id='{{this.firstName}}' attr.name='{{this.lastName}}'/><br><br>
CLASS EXAMPLE3: <input type="text" [class]= 'this.fullName' [id]='this.firstName' [name]='this.lastName'/><br>
CLASS EXAMPLE3: <input type="text" class= '{{this.fullName}}' id='{{this.firstName}}' name='{{this.lastName}}'/><br><br>

The output for the above code is shown below.

The examples explained above are one-way data-binding from Component.ts class file to Component.html or View.

Event Binding

It is one-way data binding which is binding the value from Component.html to Component.ts class file or View to Component.

Open the Component.html and place the below code.

<h2>EVENT BINDING</h2>
<hr>
<input type="button" (click)=onBtnClick() value="CLICK" height="20" width="20">
<h3>{{this.onButtonClick}}</h3>
<input type="button" (dblclick)=onDblClick() value="DOUBLE CLICK" height="20" width="20">
<h3>{{this.onDoubleClick}}</h3>

Here from the above code, when user clicks or double clicks on a button on View, we are setting the value this.onButtonClick and this.onDoubleClick in onBtnClick() and

onDblClick() methods and displaying the result or message to the end user below the Click and Double click button.

The output can be displayed below.

Two Way Data Binding

In Two-way data binding, the data can be bound from Component.html to Component.ts or Component.ts to Component.html (Viceversa).

If the textbox value in the View changes then Component.ts value also gets reflected, similarly if we change Component.ts value then the textbox value gets reflected.

In two way data binding we use [(ngModel)] attribute, as well as we, need to import FormsModule in app.Module.ts file like below.

import {FormsModule} from '@angular/forms';

and add FormsModule in imports array.

imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],

Open the Component.html file and place the below code.

Two Way Binding: <input type="text" [(ngModel)]='this.fullName' value="{{this.fullName}}">
{{this.fullName}}

With the above, if Textbox value changes then the Component.ts field this.FullName changes, as well as if we change Component.ts this.fullName with the new value it will be reflected in the TextBox.

Conclusion

In this article, we learned two different ways of binding the data in Angular.

Thanks & I hope this helps you.

6 Comments

Join the conversation! Your thoughts help the community grow.

Sundaram Subramanian6y ago
Great work. In a clear way, it is explained.
- Sundaram Subramanian6y ago
  But only one small suggestion to improve the article quality bit more is to give some Real-Time Examples so that we can easily relate the purpose of a feature.
- Khaja Moizuddin6y ago
  Yeah Sure Sundar definitely I will do as you suggested.
- Khaja Moizuddin6y ago
  Thanks a lot Sundar. It really helps me to write more.
Sourav Kumar Das6y ago
Nice and informative article Sir. Thanks for sharing.
- Khaja Moizuddin6y ago
  Thanks Sourav.