Interpolation Data Binding In Angular

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

Introduction

 
This article will explain interpolation binding in an Angular application. Angular Interpolation is used to achieve one-way data binding from component to the View template. 
 
Interpolation allows the developer to place the component property name in the View template, enclosed in double curly braces {{propertyName}}. Let us see it in a demo application.
 
Step 1
 
Open the command prompt from Windows Search or press the Windows key +R from the keyboard, type cmd, and hit Enter.
 
Step 2
 
Create a new project in Angular.
 
ng new AngularDemo
 
Interpolation Data Binding In Angular
 
Step 3
 
Open the project in Visual Studio Code and type the following command to open the project.
  1. Code .
Interpolation Data Binding In Angular
 
Step 4
 
Open the terminal in Visual Studio Code and create a component named "employee".
 
ng g c employee
 
Interpolation Data Binding In Angular
 
Step 5
 
Open this "employee" component in your application. Here is the code for this file.
  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. }  
Step 6
 
Open employee.component.html in your application. Here is the code for this file.
  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. </table>  
Step 7
 
Open app.component.html in your application take selector name from employee.component.ts. Here is the code for this file.
  1. <app-employee></app-employee>  
Step 8
 
Run the application by typing the following command.
 
ng serve --open
 
Interpolation Data Binding In Angular

Interpolation with numeric calculation

 
We can do some mathematical calculation and work with expressions in interpolation within the curly braces.
  1. <h2>  
  2.  10+20= Total {{10+20}}  
  3. </h2>  
  4. <h2>  
  5.   10+20-5*15/3= Total {{10+20-5*15/3}}  
  6. </h2>  
Interpolation Data Binding In Angular
 
If you want to calculate the bonus of an employee, you can combine the expression with property value and do the calculation.
  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>Annual Bonus</td>  
  28.     <td>{{salary*0.3}}</td>  
  29.   </tr>  
  30. </table>  
Interpolation Data Binding In Angular
 

Use of ternary operator with Angular interpolation

 
The expression that is enclosed in the double curly braces is commonly called as Templateexpression and the template expression can also be a ternary operator.
  1. <<h1>Last Name:{{lastName ? lastName:'Last Name Not Available'}}</h1>  
Interpolation Data Binding In Angular
Now, let’s modify the LastName property value to null as shown in the below example and then run the application. 
  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=null;  
  12.   age:number=32;  
  13.   position:string="Software Developer";  
  14.   office:string="Bangalore";  
  15.   salary:number=65000;  
  16.   
  17.   getFullName():string  
  18.   {  
  19.    return this.firstName + " " + this.lastName;  
  20.   }  
  21. }  
Interpolation Data Binding In Angular
 
Let’s see how to call a class method using interpolation and you will also see how to create a method using TypeScript.
  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.   
  17.   getFullName():string  
  18.   {  
  19.    return this.firstName + " " + this.lastName;  
  20.   }  
  21. }  
  22.   
  23. <h1>Full Name:{{getFullName()}}</h1>  
Interpolation Data Binding In Angular