What is Interpolation in AngularJS ?

In this article, we will know about Interpolation in AngularJS, along with understanding the basic implementation. In AngularJS, Interpolation is a way to transfer the data from a TypeScript code to an HTML template (view), i.e. it is a method by which we can put an expression in between some text and get the value of that expression. Interpolation basically binds the text with the expression value. Interpolation is a one-way data binding. Through this, we can bind some data values from our logic. To use the interpolation we need to put our expression into the double curly braces {{ }}. With Interpolation, only string data/ expression will be evaluated, ie., only string parameter will be used in the interpolation.

Syntax: 

{{ expression }}

Working of Interpolation: During the compilation process, the $interpolate service is being utilized by the compiler in order to display if the text & the attribute have interpolation markup, along with the embedded expressions. For this case, an interpolateDirective will be added by the compiler to the text node and registers watches on the computed interpolation function, for which the respective text node or the attribute values will be updated, which is part of the normal digest cycle.

We can pass different parameters, ie., a boolean value, arithmetic operation, numeric value, etc, in the form of expression into the double curly braces {{ }}, that will transform into the string data.

Example: This example describes the basic usage of the Interpolation in AngularJS.

app.component.html

<div>{{3+2}}</div>
<div>{{title}}</div>
<div>{{value}}</div>
<div>{{bool}}</div>

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title: string = "GeeksforGeeks";
  value: number = 0;
  bool: boolean = true;
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

In the above example, we have used different expressions and data binding as:

• Expression interpolation
• String interpolation
• Number Value interpolation
• Boolean Value interpolation

Benefits of the Interpolation:

•  We can use the expression and display its value directly in HTML.
•  We can bind data from our typescript logic.
•  We can render the variable and it will keep updating values.
•  We can have one-way data binding.