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 gerendert wird und wann.

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 Sie durch ein Array iterieren und für jedes Element automatisch ein HTML-Element generieren können.

<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. Dadurch wird die Benutzeroberfläche skalierbarer und redundanter Code vermieden.

Zusätzliche Funktionen von ngFor

Neben der einfachen 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 optisch leichter zu überblicken ist.

Strukturelle Direktive NgIf

Sehen wir uns an, wie die bedingte Darstellung anhand eines einfachen Aufgabenlisten-Beispiels funktioniert. Die Liste soll angezeigt werden, wenn sie Aufgaben enthält, und falls sie leer ist, soll eine Nachricht wie "Noch keine Aufgaben" erscheinen.

In Angular wird die Direktive *ngIf verwendet, um Elemente bedingt ein- oder auszublenden. Obwohl sie wie ein reguläres HTML-Attribut aussieht, leistet sie im Hintergrund deutlich mehr.

<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 ins Spiel. Sie ermöglicht es, eine alternative Vorlage mit einem <ng-template> und einem benutzerdefinierten Label zu referenzieren.

So funktioniert es:

• 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.