String Interpolation in Angular

String Interpolation ermöglicht es, ein Attribut aus der .ts-Datei im HTML als String anzuzeigen.

Angenommen wir haben ein Attribut pageTitle in einer Komponente definiert, um einen Titel auf der Seite anzuzeigen. Zusätzlich gibt es das Attribut member, in dem das Mitglied gespeichert ist, das wir anzeigen wollen.

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

@Component({
  selector: 'app-members-overview',
  templateUrl: './members-overview.component.html'
})
export class MembersOverviewComponent {

  pageTitle = 'Mitgliedsinformation';
  member = new Member('Hans', 'Maier'); // firstName: Hans
                                        // lastName:  Maier

}

Um in Angular zu definieren, dass wir gerne den Inhalt von pageTitle anzeigen wollen und nicht den String ‘pageTitle’, verwenden wir String Interpolation. Dazu schreiben wir das Attribut, das wir als String darstellen wollen, in doppelte geschweifte Klammern:

<h1>{{ pageTitle }}</h1>

Lassen wir die Klammern weg, wird der angegebene Text nicht interpoliert, sondern als String angenommen:

<h1>pageTitle</h1>

Interpoliert heißt an dieser Stelle, dass, egal von welchem Typ das Attribut ist, ein String davon abgeleitet wird.

Entsprechend kann ich auch Zahlen einfach mittels String Interpolation darstellen. Bei Enums wird entsprechend der Wert des Enums ausgegeben, usw.

Möchte ich ein Objekt anzeigen, wie bspw. das Mitglied in unserem Fall oben, ist es wichtig zu wissen, dass die Interpolation nicht auf komplexeren Objekten funktioniert. Möchte ich z.B. ein Mitglied anzeigen, muss jede Eigenschaft einzeln interpoliert werden.

Das hier funktioniert nicht:

<div>{{ member }}</div>

Stattdessen kann man die Properties des Objektes einzeln ausgeben:

<div> Vorname: {{ member.firstname }}</div>
<div> Nachname: {{ member.lastname }}</div>

Allerdings kann man auch die Rückgabewerte von Funktionen interpolieren, solange es sich nicht um komplexe Datentypen handelt:

<div> Alter: {{ getFullName(member) }}</div>

Hierbei ist aber zu beachten, dass Angular die Interpolation in jedem Change Detection Cycle durchführt. Änderungen, die die Change Detection auslösen, können verschiedene asynchrone Prozesse wie Backend-Calls, Mausbewegungen, Tastatureingaben o.Ä. sein. Entsprechend sollten hier keine komplexen Berechnungen ausgeführt werden, die unabhängig von diesen asynchronen Events sind.

Stattdessen berechnet man das Ergebnis lieber einmalig und speichert es zwischen, so dass lediglich der finale Wert interpoliert werden muss.