Beim Erstellen von Benutzeroberflächen für Webanwendungen stehen wir häufig vor Szenarien wie: "Eine Liste von Elementen anzeigen, wenn sie verfügbar ist, oder einen Platzhalter anzeigen, wenn sie leer ist." In Angular werden solche Aufgaben mit strukturellen Direktiven gelöst – leistungsstarke Werkzeuge, die steuern, was im Template und wann gerendert wird.

Im Gegensatz zu regulären HTML-Attributen verändern strukturelle Direktiven nicht nur das Verhalten eines Elements – sie ändern tatsächlich die Struktur des DOM, indem sie ganze Elemente hinzufügen oder entfernen.

Strukturelle Direktive NgFor

Angenommen, Sie haben eine Liste von Aufgaben in Ihrer TaskListComponent. Jede Aufgabe soll mit eigenen Interface-Elementen angezeigt werden: einem Löschen-Button, einem Status-Umschalter usw. Jede Aufgabe manuell im HTML zu schreiben, wäre ineffizient und schwer zu pflegen, wenn sich die Daten ändern.

tasks = [
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Learn Angular', completed: false }
];

Angular stellt die Direktive *ngFor bereit, mit der eine Schleife über ein Array durchgeführt und für jedes Element automatisch ein HTML-Element generiert wird.

<task-component *ngFor="let task of tasks"></task-component>

Hier weist *ngFor="let task of tasks" Angular an: „Für jede Aufgabe im tasks-Array ein <task-component> erstellen“. Wenn das Array 3 Aufgaben enthält, rendert Angular 3 separate Instanzen von task-component, jeweils mit eigenen Daten. Dies macht die Benutzeroberfläche skalierbarer und vermeidet redundanten Code.

Zusätzliche Funktionen von ngFor

Neben der grundlegenden Iteration unterstützt *ngFor mehrere nützliche Kontextvariablen, auf die Sie direkt in der Direktive mit let zugreifen können.

Hier eine kurze Übersicht:

Hier ein Beispiel, das einige davon verwendet:

<task-component
  *ngFor="let task of tasks; let i = index; let odd = odd"
  [task]="task"
  [class.odd]="odd">
</task-component>

In diesem Beispiel wird die Variable odd verwendet, um jeder zweiten Zeile eine CSS-Klasse zuzuweisen, wodurch die Liste visuell leichter zu überblicken ist.

Strukturelle Direktive NgIf

Im Folgenden wird gezeigt, wie die bedingte Darstellung mit einem einfachen Aufgabenlisten-Beispiel funktioniert. Die Liste soll angezeigt werden, wenn Aufgaben vorhanden sind. Ist sie leer, erscheint eine Meldung wie "Noch keine Aufgaben".

In Angular wird die Direktive *ngIf verwendet, um Elemente bedingt ein- oder auszublenden. Obwohl sie wie ein gewöhnliches HTML-Attribut aussieht, verbirgt sich dahinter deutlich mehr Funktionalität.

<div *ngIf="tasks.length > 0">Task List</div>

Wenn Angular *ngIf verarbeitet, wird das Template im Hintergrund umgeschrieben. Anstatt das Element direkt zu rendern, wird es in ein <ng-template> eingebettet und nur dann dem DOM hinzugefügt, wenn die Bedingung true ist.

<ng-template [ngIf]="tasks.length > 0">
  <div>Task List</div>
</ng-template>

Wenn die Bedingung mit false ausgewertet wird (d. h. tasks.length === 0), rendert Angular das Element überhaupt nicht – es ist vollständig aus dem DOM entfernt.

Aber was ist, wenn stattdessen eine Ersatznachricht angezeigt werden soll, anstatt den Inhalt einfach auszublenden? Hier kommt die else-Klausel von *ngIf zum Einsatz. Sie ermöglicht es, eine alternative Vorlage mit einem <ng-template> und einem benutzerdefinierten Label zu referenzieren.

Folgendes geschieht:

• Angular prüft zunächst, ob das Array tasks Einträge enthält;

• Falls ja, wird das <div> mit den Task-Komponenten gerendert;

• Ist das Array leer, wird die Vorlage #noTasks verwendet und die Nachricht angezeigt: "No tasks yet 😊".

Dies sorgt für übersichtlichere Templates und erleichtert das Management leerer Zustände auf benutzerfreundliche Weise.