String Interpolation in Angular 8 (original) (raw)

Last Updated : 07 Aug, 2024

**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 `

{{ title }}

`

• **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 `

{{ title }} : {{ about }}

`

• **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 `

Welcome to GFG!!

{{displayText}}

`

• **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 = (event.target).value; }

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

``

**Output:

https://media.geeksforgeeks.org/wp-content/uploads/20240806125755/ezgifcom-video-to-gif.mp4