Expert Angular

Interpolation in templates

Double curly braces {{ }} are an interpolation in Angular. They're a way to map the text between the braces to a component property. We have already used and implemented interpolation in various examples throughout the chapters.

In the template we will write, the value is written inside double curly braces, as follows:

{{ test_value }}

Let's quickly create a simple example to understand the interpolation. In the app.component.ts file, let's define a variable named title:

import { Component } from '@angular/core';@Component({ templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent {  constructor() { }  title = "Data Binding";}

Now, we need to display the value of title ...