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 leistungsfähiges Werkzeug bereit: Directives. Sie ermöglichen es, HTML um neue Verhaltensweisen zu erweitern und unterstützen beim Erstellen flexibler Templates und Logik ohne zusätzlichen Boilerplate-Code.

Was sind Directives?

Stellen Sie sich ein HTML-Element wie ein Mitglied der Bühnencrew in einem 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.

Kurz gesagt, Direktiven sind der Mechanismus, den Angular verwendet, um HTML direkt aus dem Template heraus zu steuern.

Arten 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 Sie beispielsweise eine Nachricht nur anzeigen möchten, wenn der Benutzer angemeldet ist, oder eine Liste von Produkten aus einem Array darstellen wollen, steuert eine strukturelle Direktive, ob die Elemente erscheinen oder nicht.

Attribut-Direktiven

Diese beeinflussen das Aussehen oder Verhalten bestehender Elemente – wie Stile, CSS-Klassen oder Reaktionen auf Ereignisse. Stellen Sie sich vor, ein Eingabefeld wird hervorgehoben, 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 Ihnen auch, eigene Direktiven mit individuellem Verhalten zu erstellen, die speziell auf die Anforderungen Ihrer Anwendung zugeschnitten sind. Beispielsweise können Sie eine Direktive entwickeln, die beim Laden der Seite automatisch das erste Formularfeld fokussiert, oder eine, die beim Überfahren von Elementen Tooltips anzeigt. Diese eigenen Direktiven machen Ihre Anwendung interaktiver und individueller.

Warum brauchen wir Direktiven?

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