Angular Interpolation

Angular interpolation is used to display all kinds of data, i.e., array, string, number, date, object, etc., into view dynamically. Interpolation is used for one-way data binding in Angular. It helps to move data from Angular components to HTML and view it. Let’s see an example to evaluate this.

Index

Angular Without Interpolation

<h1>Hello XYZ</h1>

This is a simple way to display Hello <USER> in the browser when a user opens the website.

But here, the name of the user is displayed statically. But if we want to display it dynamically, we can do that with the help of interpolation. Interpolation is used to display a component property into the respective view template with double curly braces.

Angular Interpolation Standard Practices

The syntax of Interpolation:

{{ name }}

Here, the name is the variable where the data is stored.

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

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

export class AppComponent {
  title = 'my-app';
  name="ABC"
}

So, for example, in the component.ts file, we have declared a variable called name, and we’re using that variable to display the user’s name dynamically using interpolation.

<h1>Hello {{name}}</h1>

Assess Arithmetic Operation

Interpolation is used to evaluate the arithmetic expression within the curly braces and display the result on the screen.

For example:

<span>{{10 + 20}}</span>

The output is: 30 on the browser

Call Methods and Display the Return Values

We can call methods inside the curly braces and display the return value.

For example:

<h1>Hello {{ getname() }}</h1>

<!-- getname() is user-defined function which is returning name of the user. -->

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

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

export class AppComponent {
  title = 'my-app';
  name = "ABC"
  getname() {
    return this.name
  }
}

And the output is: Hello ABC //ABC is the assumed user’s name.

Execute and Display Array Items

We use interpolation along with *ngFor to display the items of the array.

Suppose we have an array of objects with the name of every user. We can display all the names using Interpolation and *ngFor.

<ul *ngFor="let items of array">
  <li>{{ items.name }}</li>
</ul>

Here the array contains the objects in which the names of every user are stored.

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

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

export class AppComponent {
  title = 'my-app';
  array = [
    {name: "ABC"},
    {name: "DEF"},
    {name: "XYZ"},
    {name: "GHI"}
  ]
}

The output on the browser is displayed below:

Conclusion

In this tutorial, we have learned how to use interpolation to display the data dynamically on the browser. This will help in making cool and dynamic angular apps. In the upcoming articles, we will see different types of binding and their usages to make our concept stronger in angular.

Read Next: Angular Property Binding