String Interpolation in Angular 8

String Interpolation is a one-way databinding technique which is used to output the data from a TypeScript code to HTML template (view). It uses the template expression in double curly braces to display the data from the component to the view. String interpolation adds the value of a property from the component.

For example:

{{ data }}

We have already created an Angular project using Angular CLI.

See: How to create Angular 8 project. 

Here, we are using the same project for this example.

Open app.component.ts file and use the following code within the file:

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

@Component({    

  selector: 'app-root',    

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

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

})    

export class AppComponent {    

  title = 'Data binding example using String Interpolation';    

}    

Now, open app.component.html and use the following code to see string interpolation.

<h2>    

  {{ title }}    

</h2>    

Now, open Node.js command prompt and run the ng serve command to see the result.

Output:

String Interpolation can be used to resolve some other expressions too. Let’s see an example.

Example:

Update the app.component.ts file with the following code:

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

@Component({    

  selector: 'app-root',    

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

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

})    

export class AppComponent {    

  title = 'Data binding example using String Interpolation';    

    numberA: number = 10;    

    numberB: number = 20;    

  }   

app.component.html:

<h2>Calculation is : {{ numberA + numberB }}</h2>  

Output:

You can use the same application in another way:

App.component.ts:

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

@Component({    

  selector: 'app-root',    

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

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

})    

export class AppComponent {    

  title = 'Data binding example using String Interpolation';    

  numberA: number = 10;    

  numberB: number = 20;    

  addTwoNumbers() {    

    return this.numberA + this.numberB;    

  }    

}  

App.component.html:

<h2>Calculation is : {{ numberA + numberB }}</h2>  

Output: