Interpolation in Angular

Interpolation is the simplest form of data binding in Angular, Interpolation is one-way data binding from the Component class to the view template. Interpolation is implemented using a double set of curly braces enclosing a property which is defined in the component.

{{property}}

At runtime Angular gets the value of the property from the component and displays it in the view.  Interpolation can be used to display text/messages in the view. Interpolation comes in handy when we need to append components property values with other text in the view.

Let us understand Interpolation with a very simple example, we will set a property title in the component and display it in the View using interpolation.

app.component.ts
import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor() { }

  title = 'Angular 6';

}

app.component.html
<div>

  <p>Welcome to <b>{{ title }}&lt;/b></p>

</div>

In the component class we set the value of the title property, in the view template we append the title property to the Welcome text. The output will be as follows.