In jeder Webanwendung ist es wichtig, nicht nur Daten anzuzeigen, sondern auch zu steuern, wie Elemente aussehen, sich verhalten und auf der Seite strukturiert sind. Angular stellt hierfür ein leistungsstarkes Werkzeug bereit, das als Direktiven bezeichnet wird. Damit können Sie HTML neue Verhaltensweisen "beibringen" und so flexible Vorlagen und Logik ohne zusätzlichen Boilerplate-Code erstellen.

Was sind Direktiven?

Stellen Sie sich ein HTML-Element wie ein Mitglied der Bühnencrew im Theater vor – es steht einfach da und wartet auf Anweisungen. Eine Direktive ist wie der Regisseur, der von außerhalb der Bühne ruft: "Jetzt komm heraus!", "Wechsle dein Kostüm!" oder "Verschwinde!". Das Element (das Crewmitglied) befolgt den Befehl, ohne Fragen zu stellen.

Einfach ausgedrückt sind Direktiven der Mechanismus, den Angular verwendet, um HTML direkt aus dem Template heraus zu "steuern".

Typen von Direktiven

Angular umfasst verschiedene Arten von Direktiven, die jeweils einen eigenen Zweck erfüllen:

Strukturelle Direktiven

Diese verändern die Struktur des DOM selbst – sie fügen Elemente zur Seite hinzu oder entfernen sie. Wenn beispielsweise eine Nachricht nur angezeigt werden soll, wenn der Benutzer angemeldet ist, oder eine Produktliste aus einem Array dargestellt werden soll, steuert eine strukturelle Direktive, ob die Elemente erscheinen oder nicht.

Attribut-Direktiven

Diese beeinflussen das Aussehen oder Verhalten bestehender Elemente – etwa durch Styles, CSS-Klassen oder Reaktionen auf Ereignisse. Beispielsweise kann ein Eingabefeld hervorgehoben werden, wenn der Benutzer einen Fehler macht, oder die Farbe eines Buttons ändert sich beim Überfahren mit der Maus – hierfür werden Attribut-Direktiven verwendet.

Eigene Direktiven

Angular ermöglicht es auch, eigene Direktiven mit individuellem Verhalten zu erstellen, die speziell auf die Anforderungen der Anwendung zugeschnitten sind. Beispielsweise kann eine Direktive entwickelt werden, die beim Laden der Seite automatisch das erste Formularfeld fokussiert, oder eine, die beim Überfahren von Elementen Tooltips anzeigt. Solche eigenen Direktiven machen die Anwendung interaktiver und individueller.

Warum benötigen wir Direktiven?

Direktiven sind ein zentraler Bestandteil beim Erstellen dynamischer, benutzerfreundlicher und wartbarer Benutzeroberflächen in Angular. Sie ermöglichen die Steuerung der Seitenstruktur, die Veränderung des Erscheinungsbilds von Elementen und die Wiederverwendung von Logik innerhalb der Anwendung.