Update appNew update is available. Click here to update.
Last Updated: Oct 6, 2023

What is Interpolation in AngularJS?


Angular is a tool for making websites that only have one page. It's free and made with Javascript. Angular makes it easier to organize and speed up the code on the front part of a website.

Interpolation in Angular

In this article, we'll talk about What is Interpolation in AngularJS.

What is Interpolation in Angular?

In Angular, you can use interpolation to bind data in one direction. It's called string interpolation because you can use it with string values.

Interpolation in Angular is a way to show changing things on a website. It lets you put data inside a special code that goes into the website's text. This code has curly brackets around it.

Interpolation syntax



Interpolation is a way to display changing the information on a webpage. It takes data from TypeScript. Then shows it on an HTML page. You can also use interpolation to reference functions and variables. You can do calculations. It converts expressions into strings. A webpage can display it using a directive.

String Interpolation vs Property Binding

String Interpolation

Property Binding

This method allows you to insert the value of a variable into a string using the syntax of ${variable}.This method allows you to bind the value of a property to an element using the syntax of [].
It is commonly used in template literals or in JSX in React to dynamically generate a string with variables.It is commonly used in Angular to bind component properties to elements.
It can be used with any string value, including text, HTML, and URL.This method can be used to bind any property value to an element, but only for HTML attributes and DOM properties.
When you use interpolation, the value of a variable gets checked when the page is loaded. This means that if you make changes to the variable later on, those changes will show up in the string that has been interpolated.When you bind a property, its value is determined when you set up the binding. If the property's value changes later, the bound element won't update automatically to reflect the new value.

Eg. const name = 'Alice';

console.log(`Hello, ${name}!`);

Eg. <input [value]="name">

Similarities between String Interpolation and Property Binding

String Interpolation and Property Binding are two ways to create dynamic content on a web page. They are similar in how they are written and what they do.

String Interpolation puts the value of a variable into a sentence using ${variable} symbols. For example, console.log(Hello, ${name}!) will show "Hello, John!" if the name value is "John".

Property Binding links the value of a feature of an element to a variable using [] symbols. For example, <input [value]="inputValue"> will connect the value of the inputValue variable to the value feature of the input field.

Both ways make it easy for developers to update content on a web page. It is based on the value of a variable or feature. For example, String Interpolation can be used to make a greeting message with the user's name. While the Property Binding can be used to set an input field value based on a variable.

Difference between String interpolation and Property Binding

 String InterpolationProperty Binding
UsageUsed to insert variables into strings, such as in template literals or in JSX in React.Used to bind variables or properties to HTML attributes or DOM properties.
Variable/Property Evaluationis Evaluated at runtime, meaning any changes to the variables will be reflected in the interpolated string.Evaluated when the property is bound and does not update automatically if the value changes later.
Applicable toStrings and templates.HTML elements and DOM properties.
Dynamic UpdatingAutomatically update the string when the variable changes.Require manual re-binding if the variable changes.
Data TypesWork with strings, numbers, and boolean values.Can bind to any data type, including arrays, objects, and functions.
CompatibilityWorks with most modern browsers.Works with Angular, React, and other front-end frameworks.

Properties of Interpolation in Angular

Let's take a look at what interpolation can do in Angular:

  • You put {{expression}} in your HTML code to use interpolation.
  • You can show many different types of things with interpolation, like words, numbers, lists, and more.
  • Some special things like ++, --, &&, and || won't work with interpolation.
  • You can only show public or protected things, not private ones.

Implementing Interpolation in Angular with Examples

To use interpolation in Angular, we put our data or expression inside two curly braces like this: {{ expression }}.

Here are some simple examples to help you understand interpolation in Angular. To use interpolation, you need to create an Angular project. When you create a project, you will see a screen that looks like the picture shown.

app component in interpolation

The app.component.html is the file in which you will write your HTML documents.

Let’s write in an HTML file.


<h2> {{title}} </h2>


To implement interpolation, we will make changes in our app.component.ts file.

import { Component } from '@angular/core';
@Component ({
    selector: 'app-root',
    templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
export class AppComponent {   
   title = "Hello Ninjas";


Compile our code using the ng serve command

Code Compilation

After successfully compilation, you will see the output as:


Let’s see some more examples:

Let’s write in an HTML file.

app.component.html file

Let’s use operation in an HTML file.

<h2>Welcome to coding Ninjas</h2>





Let’s call the function through interpolation.

app.component.html file

<h2>{{getData()}} </h2>

app.component.ts file

import { Component } from '@angular/core';    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
export class AppComponent {   
  title = "Hello Ninjas";
 return "The Data from the Function."



Let’s check the boolean through the interpolation 

app.component.html file

<h2>{{title == "Hello Ninjas"}} </h2>

app.component.ts file

import { Component } from '@angular/core';    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
export class AppComponent {   
  title = "Hello Ninjas";



Notes on Interpolation

Interpolation is one-way binding

String Interpolation only displays the current value of a variable in a string. It cannot update automatically if the variable changes later. If you change the value of the variable. It won't change the displayed string by itself. You have to update the string manually to show the changes.

Should not change the state of the app

String interpolation is a way to show a variable's value in a string on a webpage. It's important to ensure that the string being displayed does not have the ability to change the state of the application. The state of the app doesn't update automatically if the variable's value changes later. If you change the variable's value, you need to update the string to show the updated value on the webpage.

The expression must result in a string

In String Interpolation, we can add a value or variable to a string. However, we should make sure that the result is always a string. Even if we add a number or boolean, it will be automatically converted into a string before being added to the string.

Works only on Properties & not attributes

String Interpolation is a technique that lets us add variables into strings. It doesn't work for HTML attributes. Attributes are like fixed HTML properties that can't change while the page is running. String Interpolation can only be used with properties and variable values that can change.

Examples of Interpolation

Invoke a method in the component

String Interpolation is not used to invoke a method in a component, as it is a one-way binding technique used to insert variables into strings. Instead, we can use Property Binding to bind a method to an event in the HTML element, such as the click event. Here is an example of how to bind a method using Property Binding in Angular:

export class MyComponent {
  handleClick() {
    console.log('Button clicked');

<button (click)="handleClick()">Click me</button>


In this example, the handleClick method is bound to the click event using Property Binding. When the button is clicked, the handleClick method is called and logs "Button clicked" to the console.

Perform some mathematical operations

export class MathComponent {
  num1: number = 10;
  num2: number = 5;

  add() {
    return this.num1 + this.num2;

In this example, we create a component named MathComponent with two variables named num1 and num2, which have initial values of 10 and 5, respectively. We also create a method named add() that adds the values of num1 and num2.

We can use Property Binding to display the result of this method in the component's template.

<div>Result of addition: {{add()}}</div>

In this example, we use String Interpolation to display the result of the add() method.

Bind to an element property

Binding to an element property in Angular sets the value of an element's property dynamically.


export class MyComponent {
  disabled: boolean = true;
<button [disabled]="disabled">Click me</button>


In this example, [disabled] sets the value of the disabled property of the button element to the value of the disabled variable in the component.

Use a template reference variable

Using a template reference variable in Angular allows accessing an element's properties and methods in the component.


<input #myInput type="text">
<button (click)="logInputValue(myInput.value)">Log input value</button>

In this example, #myInput is the template reference variable for an input element. We can access the value of the input element in the component method logInputValue() by passing myInput.value as a parameter.

Cross-site Scripting or XSS

XSS is a security vulnerability where attackers inject malicious code into a web page viewed by other users. It occurs when a web application does not properly validate user inputs before rendering them to the user's browser.

Attackers can exploit XSS vulnerabilities to steal sensitive user data, such as login credentials. They can also use XSS attacks to redirect users to malicious websites or perform other malicious actions.

For example, an attacker might inject code into an input field that, when rendered, executes malicious code that steals data or takes control of the user's browser.

Read about Bitwise Operators in C here.

Benefits of the Interpolation

  • Interpolation provides seamless integration as it integrates very well with angular features such as pipes, event buildings, directives, etc.
  • It also provides a very good readable way to integrate data in the templates.
  • Interpolation is one of the ways of data binding, which can be achieved by typescript logic.
  • It helps in troubleshooting and debugging. You can easily spot any irregular value of the interpolation values.
  • Also, interpolation automatically performs HTML escaping.

Frequently Asked Questions

What is interpolation between two meshes?

Interpolation between two meshes is like blending or morphing them together smoothly. It creates new shapes or positions by combining the points and features of the original meshes gradually.

Why we use string interpolation in Angular?

We use string interpolation in Angular to dynamically render values or expressions in the view. It allows us to display component data in the template and create more dynamic and interactive user interfaces.

Which formula is used for interpolation?

The formula used for interpolation, often called linear interpolation, calculates an estimated value within a range based on known data points. It uses the equation of a straight line to make this estimation.

What expression can you display through interpolation?

You can display multiple properties through interpolation. You can display strings, numbers, operations, arrays, lists, etc. 

What are operators not supported by interpolation?

Some operators are not supported by interpolation, like increment operator(++), decrement operator(--), bitwise operator(&&, ||), instance methods, typeof, a new keyword, etc. 


In this blog, we discussed What is interpolation in AngularJS. We briefly discussed the properties and implementations of interpolation. We later learn this through various examples.

To learn more concepts of Angular, please refer to our blog.

AngularJS Events.

Angular 8 Interview Questions.

AngularJS References.

AngularJS Form Validation.

AngularJS Tutorial.


Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enrol in our coursesrefer to the mock test and problems look at the interview experiences and interview bundle for placement preparations.

Happy Coding!!

Previous article
ngFor in Angular
Next article
Introduction to Spring MVC & Flow