String Interpolation in Angular 8

String Interpolation in Angular 8 is a One-way Data-Binding technique that is used to transfer the data from a TypeScript code to an 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 to the HTML template view.

Syntax:

{{ component_property }}

Approach: 

• Define a property in the app.component.ts file containing some string value.
• In the app.component.html file, bind the value of that property by calling the property name in double curly braces {{ property_name }}.

Example 1: This example illustrates the basic usage of the String Interpolation in Angular 8.

• app.component.html

HTML

<h1>{{ title }}</h1>

• app.component.ts

Javascript

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

Output:

Example 2: This is another example that illustrates the String Interpolation concept where the content of the component is rendered with the help of double curly braces in the view.

• app.component.html

HTML

<h1 [style.color] = "'green'"
    [style.text-align] = "'center'" >
    {{ title }} : {{ about }}
</h1>

• app.component.ts

Javascript

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = "GeeksforGeeks";
    about = "Computer Science Portal for Geeks";
}

Output:

Example 3: In this example, whenever the “Display Details” button is clicked, the current date and time are printed. From the 5th click, the background color of the text will start changing.

• app.component.html

HTML

<h3 style="color:#008000;">
  Welcome to GFG!!
</h3>
<button class="btn btn-success"
        (click)="getOnClick()">
  Display Details
</button>
<p *ngIf="btnClickCount%2!=0">
  {{displayText}}
</p>
<div *ngFor="let num of numbersList; let i=index"
     [ngStyle]="{backgroundColor: i>=4 ?'limegreen':'transparent'}"
    [ngClass]="{'whitetext':i>=4}">
    {{num}}
</div>

• app.component.ts

Javascript

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

@Component({
  selector: '[app-server]',
  templateUrl: './server.component.html',
  styles: [
    `
      .whitetext {
        color: white;
      }
    `,
  ],
})
export class ServerComponent {
  serverId: number = 10;
  serverStatus: string = 'offline';
  secretpassword = 'tuna';
  onclick = false;
  displayText = '';
  btnClickCount = 0;
  numbersList = [];
  count = 0;

  getServerStatus() {
    return this.serverStatus;
  }
  getPassword(event: Event) {
    this.secretpassword = (<HTMLInputElement>event.target).value;
  }

  getOnClick() {
    this.onclick = true;
    this.count = ++this.btnClickCount;
    this.numbersList.push(new Date());
  }
}

Output: