Angular bietet eine Reihe von eingebauten Direktiven wie ngIf, ngFor und ngClass. Sie können jedoch auch eigene benutzerdefinierte Direktiven erstellen, um spezifische Aufgaben in Ihrer Anwendung zu übernehmen. Im Folgenden wird anhand eines praktischen Beispiels gezeigt, wie eine solche Direktive erstellt wird.

Erstellen der benutzerdefinierten Direktive

Es ist empfehlenswert, den Code zu organisieren, indem ein eigener Ordner für Direktiven angelegt wird. Nennen wir diesen Ordner directives.

Mit diesem Befehl wird ein neuer Ordner namens directives im Verzeichnis app erstellt und die neue Direktivendatei darin abgelegt:

• highlight-on-complete.directive.ts – enthält die Logik der Direktive;

• highlight-on-complete.directive.spec.ts – Datei für Unit-Tests (kann bei Bedarf gelöscht werden).

Die grundlegende Struktur der Direktive sieht wie folgt aus:

Definition der Funktionalität der Direktive

Diese Direktive hebt ein Aufgaben-Element grün hervor, wenn es als abgeschlossen markiert ist. Andernfalls werden die Stile entfernt.

Um Angular mitzuteilen, dass diese Klasse eine Direktive ist, wird sie mit @Directive dekoriert:

@Directive({
  selector: '[appHighlightOnComplete]'
})

Der Selektor [appHighlightOnComplete] bedeutet, dass die Direktive als Attribut verwendet wird, nicht als Tag oder strukturelle Direktive.

Im HTML wird sie wie folgt angewendet:

<div [appHighlightOnComplete]="task.completed"></div>

Die Direktive auf Änderungen reagieren lassen

Um Änderungen am Eingabewert completed zu erkennen, wird das OnChanges-Interface implementiert:

Wir definieren außerdem eine Eingabe-Eigenschaft, um den Wert von der Komponente zu empfangen:

Was dies bewirkt:

• Informiert Angular darüber, dass der Wert aus dem Template bereitgestellt wird (zuvor haben wir task.complete aus dem Template übergeben);

• Bindet die interne Eigenschaft "completed" der Direktive an den aus dem Template übergebenen Wert;

• Legt einen Standardwert von true fest (dieser wird überschrieben, sobald tatsächliche Daten empfangen werden).

Sicherer Zugriff auf das DOM

Angular verwendet Dependency Injection, um Zugriff auf das DOM und Rendering-Tools bereitzustellen.

Im Konstruktor injizieren wir:

ElementRef gibt uns eine Referenz auf das Host-DOM-Element. Renderer2 ermöglicht es uns, Stile und Attribute sicher zu ändern, ohne das DOM direkt zu manipulieren.

Auf Änderungen mit ngOnChanges reagieren

Nun implementieren wir die Hauptlogik in ngOnChanges, das immer ausgeführt wird, wenn sich der Eingabewert ändert.

Vollständige Implementierung:

Die Methode ngOnChanges wird immer dann ausgelöst, wenn Angular Änderungen an den Eingabe-Eigenschaften der Direktive erkennt.

In diesem Fall reagiert sie auf Aktualisierungen des aus dem Template übergebenen Werts completed. Ist completed true, fügt die Direktive dem Element einen grünen Rahmen und einen hellgrünen Hintergrund hinzu. Ist der Wert false, werden diese Stile entfernt und das Element erhält sein ursprüngliches Aussehen zurück. Dies bietet eine visuelle Kennzeichnung für abgeschlossene Aufgaben.

Mit dieser benutzerdefinierten Direktive können Sie das Stil-Verhalten auf wiederverwendbare und saubere Weise kapseln. Sie können sie nun auf jedes beliebige Element in Ihrer Anwendung anwenden, ohne Logik in mehreren Komponenten zu duplizieren. Dies ist ein hervorragendes Beispiel dafür, wie das Direktiven-System von Angular dabei hilft, modulareren und besser wartbaren Code zu schreiben.