Manipulationen am DOM mit Direktiven (ngIf, ngFor, ngSwitch)
HTML ist eine Auszeichnungssprache, die primär dazu dient, die Struktur und das Layout von Webseiten zu definieren. HTML ist keine vollwertige Programmiersprache: Es bietet keine Unterstützung für Kontrollstrukturen wie Schleifen oder Fallunterscheidungen. Dies bedeutet, dass es mit reinem HTML nicht möglich ist, HTML-Elemente mehrfach darzustellen oder deren Anzeige gezielt an Bedingungen zu knüpfen. Soll eine Webseite beispielsweise zehnmal den Text „Hallo Welt“ anzeigen, muss der Text zehnmal im HTML-Quellcode stehen.Einen Text nur unter bestimmten Bedingungen anzuzeigen, zum Beispiel nur an Wochenenden, ist nicht möglich. An dieser Stelle greifen Frameworks wie Angular ein: Sie erweitern die Funktionalität von HTML durch Mechanismen, die Programmierlogik in die Struktur einer Webseite integrieren. Eine der zentralen Stärken von Angular ist es, diese fehlenden Fähigkeiten von HTML durch den Einsatz sogenannter Direktiven zu ergänzen. Direktiven sind spezielle Anweisungen, die es erlauben, das Document Object Model (DOM) einer HTML-Seite dynamisch zu beeinflussen und zu verändern. Dies geschieht basierend auf den Daten und der Logik, die im zugehörigen TypeScript-Code definiert sind. Mit diesen Direktiven können Entwickler Elemente mehrfach ausgeben lassen (Schleifen), bedingte Anzeigesteuerungen vornehmen (Fallunterscheidungen) und weitere komplexe Manipulationen des DOM durchführen. Mit reinem HTML wäre dies nicht möglich. Die einfachste der sogenannten strukturellen Direktiven ist *ngIf. Mit ihr wird ein Element nur dann in das DOM eingefügt, wenn eine Bedingung erfüllt ist. Die Bedingung wird in der Regel im TypeScript-Code definiert, häufig als boolesche Variable.
<div *ngIf="isVisible">Dieser Text wird nur angezeigt, wenn isVisible wahr ist.</div>
Die *ngFor-Direktive kann verwendet werden, um Elemente mehrfach auszugeben, ohne dass diese mehrfach im DOM vorhanden sein müssen. *ngFor kann außerdem verwendet werden, um ein Array von TypeScript-Werten im HTML darzustellen. Im folgenden Beispiel wird für jeden Eintrag im Array items ein li-Element erzeugt. Die Anzahl der Einträge spielt dabei keine Rolle.
<li *ngFor="let item of items">{{ item }}</li>
Die *ngSwitch-Direktive kann als eine Erweiterung von *ngIf verstanden werden. Dabei handelt es sich jedoch nicht um eine einfache Ja-/Nein-Unterscheidung. Die Variable im TypeScript-Code kann mehrere unterschiedliche Werte annehmen, und abhängig davon werden unterschiedliche HTML-Elemente angezeigt. Im folgenden Beispiel wird in Abhängigkeit von der Variablen color ein anderer Text ausgegeben.
<div [ngSwitch]="color"> <p *ngSwitchCase="'rot'">Die Farbe ist Rot.</p> <p *ngSwitchCase="'blau'">Die Farbe ist Blau.</p> <p *ngSwitchCase="'grün'">Die Farbe ist Grün.</p> <p *ngSwitchDefault>Die Farbe ist unbekannt.</p> </div>
Strukturelle Direktiven wie *ngIf und *ngFor verändern die DOM-Struktur, indem sie Elemente hinzufügen oder entfernen. Deshalb benötigt Angular beim Einsatz dieser Direktiven eigentlich ein ng-template, in dem das Element "verpackt" wird um es bedingt oder mehrfach anzuzeigen. Die Schreibweise mit dem * ist eine verkürzte und alternative Schreibweisen. Intern wandelt Angular bei strukturellen Direktiven mit * das entsprechende Element in ein ng-template um. Es dient als Vorlage (Template) die bei Bedarf eingebunden werden kann. ng-template erzeugt beim rendern des DOM selbst kein sichtbares Element erzeugt.
<div *ngIf="isVisible">Hallo Welt</div>
Wird von Angular intern in etwa so umgewandelt:
<ng-template [ngIf]="isVisible"> <div>Hallo Welt</div> </ng-template>
Bei einem *ngIf enthält das ng-template das Element, das dargestellt wird, wenn isVisible wahr ist. Angezeigt wird das div-Element also nur, wenn die Bedingung zutrifft im ng-template definiert wurde. Andernfalls fehlt das div im HTML. Mit Hilfe eines ng-template ist es sogar möglich, für die *ngIf-Direktive einen else-Block zu definieren.
<div *ngIf="isLoggedIn; else elseBlock"> Willkommen zurück! </div> <ng-template #elseBlock> Bitte melden Sie sich an. </ng-template>
Mit Angular 17 wurde für strukturelle Direktiven eine neue, zusätzliche Syntax eingeführt. Diese Direktiven beginnen mit einem @-Zeichen und bieten eine moderne und klarere Alternative zur bisherigen *ngIf Schreibweise. So können wie zuvor in HTML-Elementen genutzt werden aber auch ein Einsatz außerhalb von Elementen ist möglich. So können mit @if mehrere Elemente bedingt angezeigt werden ohne das für diese ein gemeinsames Elternelement definiert werden muss,
<div @if="condition"> Dieser Inhalt wird nur angezeigt, wenn `condition` wahr ist. </div> @if (showHello) { <h2>Hallo</h2> <h3>Wilkommen zurück!</h3> } @else { <h2>Aug Wiedersehen</h2> }
Keine strukturelle Direktive, aber dennoch an dieser Stelle erwähnenswert, ist die Attribut-Direktive ngClass. Sie ermöglicht es, CSS-Klassen dynamisch an ein Element zu binden. Von der Funktionsweise her ähnelt ngClass der strukturellen Direktive *ngIf: Eine CSS-Klasse wird nur zugewiesen, wenn eine bestimmte Bedingung erfüllt ist. Da auf ein HTML-Element mehrere CSS-Klassen gleichzeitig angewendet werden können, erlaubt ngClass ebenfalls die Kombination mehrerer Klassen.
export class AppComponent { isActive = true; isDisabled = false; }
<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }"> Diesem Text wird abhängig von den Variablen CSS-Klassen zugewiesen. </div>