String Interpolation

Die String Interpolation ist der einfachste Weg, einen Variablenwert aus dem TypeScript-Teil einer Komponente im HTML anzuzeigen. Dazu wird der Variablenname im HTML in doppelte geschweifte Klammern gesetzt.
Dabei handelt es sich nicht um eine spezielle Syntax nur zur Anzeige von Variablenwerten. Die Klammern erzeugen einen sogenannten TypeScript-Scope, in dem auch einfache Ausdrücke ausgewertet werden können.
Obwohl diese Technik „String Interpolation“ heißt, funktioniert sie nicht nur mit Zeichenketten, sondern ebenso mit Variablen anderer Typen, zum Beispiel number oder boolean. Auch einfache Berechnungen oder Methodenaufrufe lassen sich innerhalb der Klammern ausführen, solange sie keine Seiteneffekte haben.

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

@Component({
  selector: 'app-string-interpolation',
  template: `
    <h1>{{ getGreeting() }}</h1>
    <p>Status: {{ isActive ? 'Online' : 'Offline' }}</p>
    <p>Age: {{ age }}</p>
    <p>In five years: {{ age + 5 }}</p>
  `,
  standalone: true,
  styles: [`
    h1 {
      color: #2c3e50;
      font-family: Arial, sans-serif;
    }

    p {
      font-size: 16px;
      margin: 4px 0;
    }
  `]
})

export class StringInterpolationComponent {
  username = 'Lea';
  age = 27;
  isActive = true;

  getGreeting(): string {
    return `Welcome back, ${this.username}!`;
  }
}