Angular bietet eine Reihe von eingebauten Direktiven wie ngIf, ngFor und ngClass. Es ist jedoch auch möglich, eigene benutzerdefinierte Direktiven zu erstellen, um spezifische Aufgaben in der Anwendung zu übernehmen. Im Folgenden wird anhand eines praktischen Beispiels erläutert, wie eine solche Direktive entwickelt werden kann.

Erstellen der benutzerdefinierten Direktive

Es empfiehlt sich, den Code zu organisieren, indem ein eigener Ordner für Direktiven angelegt wird. Dieser kann beispielsweise directives genannt werden.

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 folgendermaßen 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, implementieren wir das OnChanges-Interface:

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, 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 ausgelöst, sobald 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 auf true gesetzt, 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 lässt sich das Stil-Verhalten auf wiederverwendbare und übersichtliche Weise kapseln. Sie kann nun auf jedes beliebige Element in der Anwendung angewendet werden, ohne Logik in mehreren Komponenten zu duplizieren. Dies ist ein gutes Beispiel dafür, wie das Direktiven-System von Angular dabei hilft, modulareren und besser wartbaren Code zu schreiben.