Property Data Binding In Angular

In this article, you will learn about property data binding in Angular.

Introduction

 
This article will talk about the property data binding in Angular, with an example. In the last article, I have explained about Interpolation data binding in Angular.
So, first, read the above article and then, let's start building a demo application for this one.
 
Step 1
 
Open the command prompt from Windows Search or press Windows key +R from the keyboard and type cmd followed by an Enter.
 
Step 2
 
Create a new project in Angular.
 
ng new AngularDemo
 
Property Data Binding In Angular
 
Step 3
 
Open the project in Visual Studio Code and type the following command to open the project.
 
Code .
 
Property Data Binding In Angular
  
Step 4
 
Open the terminal in Visual Studio Code and create a component "employee".
 
ng g c employee
 
Property Data Binding In Angular
 
Step 5
 
Open the employee component in your application and add the following code.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-employee',  
  5.   templateUrl: './employee.component.html',  
  6.   styleUrls: ['./employee.component.css']  
  7. })  
  8. export class EmployeeComponent {  
  9.   
  10.   firstName:string="Farhan";  
  11.   lastName:string="Ahmed";  
  12.   age:number=32;  
  13.   position:string="Software Developer";  
  14.   office:string="Bangalore";  
  15.   salary:number=65000;  
  16.   ProfileImage:string="assets/Images/farhan.png";  
  17. }  
Step 6
 
Open the employee.component.html in your application and add the following code.
  1. <table class="table table-bordered">  
  2.   <tr>  
  3.     <td>First Name</td>  
  4.     <td>{{firstName}}</td>  
  5.   </tr>  
  6.   <tr>  
  7.     <td>Last Name</td>  
  8.     <td>{{lastName}}</td>  
  9.   </tr>  
  10.   <tr>  
  11.     <td>Age</td>  
  12.     <td>{{age}}</td>  
  13.   </tr>  
  14.   <tr>  
  15.     <td>Position</td>  
  16.     <td>{{position}}</td>  
  17.   </tr>  
  18.   <tr>  
  19.     <td>Office</td>  
  20.     <td>{{office}}</td>  
  21.   </tr>  
  22.   <tr>  
  23.     <td>Salary</td>  
  24.     <td>{{salary}}</td>  
  25.   </tr>  
  26.   <tr>  
  27.     <td>Profile Image</td>  
  28.     <td>  
  29.       <img src="{{ProfileImage}} " height="100" width="100">  
  30.     </td>  
  31.   </tr>  
  32. </table>  
Step 7
 
Open app.component.html in your application and take the selector name from the employee.component.ts file.
  1. <app-employee></app-employee>  
Step 8
 
Open the assets folder under the src folder of the application and create an "images" folder where we can copy and paste an image. 
 
ProfileImage:string="assets/Images/farhan.png";
 
Step 9
 
Run the application by typing the following command.
 
ng serve --open
 
Property Data Binding In Angular
 
Both, the interpolation and the property binding, flow the value in one direction from Component to View template.
 

What is the difference between interpolation and property binding?

 
Interpolation
 
Interpolation is a special type of syntax with double {{}} curly braces which converts into a property binding in an Angular application. In other words, interpolation is a convenient or alternative way of property binding. Angular evaluates all the expressions in double curly braces and converts the expression results into a string.
  1. <img src="{{ProfileImage}} " height="100" width="100">  
Property binding
 
In property binding, we use the [] brackets of an element attribute which binds the class property in the Angular application. It is used for passing the data from the component class and setting the value of a given element in the View. Property Binding does not convert the expression result into a string.
  1. <img [src]="ProfileImage " height="100" width="100">  
Another example of property binding
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-employee',  
  5.   templateUrl: './employee.component.html',  
  6.   styleUrls: ['./employee.component.css']  
  7. })  
  8. export class EmployeeComponent {  
  9.   
  10.   firstName:string="Farhan";  
  11.   lastName:string="Ahmed";  
  12.   age:number=32;  
  13.   position:string="Software Developer";  
  14.   office:string="Bangalore";  
  15.   salary:number=65000;  
  16.   ProfileImage:string="assets/Images/farhan.png";  
  17.   CsharpcornerProfile:string="https://www.c-sharpcorner.com/members/farhan-ahmed24";  
  18. }  
  19.   
  20.   
  21. <a [href]="CsharpcornerProfile">My Profile</a>  
Property Data Binding In Angular
 

Summary 

In this article, I have tried to explain Angular Property Binding with some examples. I hope this article will help you understand property binding.