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

 

 

Step 3

 

Open the project in Visual Studio Code and type the following command to open the project.

Code .

 

Step 4

 

Open the terminal in Visual Studio Code and create a component named "employee".

 

ng g c employee

 

 

Step 5

 

Open this "employee" component in your application. Here is the code for this file.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent {

  firstName:string="Farhan";
  lastName:string="Ahmed";
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;
}

Step 6

 

Open employee.component.html in your application. Here is the code for this file.

<table class="table table-bordered">
  <tr>
    <td>First Name</td>
    <td>{{firstName}}</td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td>{{lastName}}</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>{{age}}</td>
  </tr>
  <tr>
    <td>Position</td>
    <td>{{position}}</td>
  </tr>
  <tr>
    <td>Office</td>
    <td>{{office}}</td>
  </tr>
  <tr>
    <td>Salary</td>
    <td>{{salary}}</td>
  </tr>
</table>

Step 7

 

Open app.component.html in your application take selector name from employee.component.ts. Here is the code for this file.

<app-employee></app-employee>

Step 8

 

Run the application by typing the following command.

 

ng serve --open

 

Interpolation with numeric calculation

 

We can do some mathematical calculation and work with expressions in interpolation within the curly braces.

<h2>
 10+20= Total {{10+20}}
</h2>
<h2>
  10+20-5*15/3= Total {{10+20-5*15/3}}
</h2>

 

If you want to calculate the bonus of an employee, you can combine the expression with property value and do the calculation.

<table class="table table-bordered">
  <tr>
    <td>First Name</td>
    <td>{{firstName}}</td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td>{{lastName}}</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>{{age}}</td>
  </tr>
  <tr>
    <td>Position</td>
    <td>{{position}}</td>
  </tr>
  <tr>
    <td>Office</td>
    <td>{{office}}</td>
  </tr>
  <tr>
    <td>Salary</td>
    <td>{{salary}}</td>
  </tr>
  <tr>
    <td>Annual Bonus</td>
    <td>{{salary*0.3}}</td>
  </tr>
</table>

 

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.

<<h1>Last Name:{{lastName ? lastName:'Last Name Not Available'}}</h1>

Now, let’s modify the LastName property value to null as shown in the below example and then run the application. 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent {

  firstName:string="Farhan";
  lastName:string=null;
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;

  getFullName():string
  {
   return this.firstName + " " + this.lastName;
  }
}

 

Let’s see how to call a class method using interpolation and you will also see how to create a method using TypeScript.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent {

  firstName:string="Farhan";
  lastName:string="Ahmed";
  age:number=32;
  position:string="Software Developer";
  office:string="Bangalore";
  salary:number=65000;

  getFullName():string
  {
   return this.firstName + " " + this.lastName;
  }
}

<h1>Full Name:{{getFullName()}}</h1>