Angular's Data Binding from Scratch - Part One.

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.

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.

<!--BINDING PROPERTY TO DOM ELEMENT-->    
<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.

We will see other data binding properties in my next article.

Thanks & I hope this helps you.