In Angular spielen Attribut-Direktiven eine zentrale Rolle, um das Verhalten und das Erscheinungsbild von Elementen dynamisch zu verändern, ohne die Struktur des DOM zu modifizieren. Zwei der am häufigsten verwendeten Attribut-Direktiven sind ngClass und ngStyle. Diese Direktiven bieten flexible Möglichkeiten, um Stile und CSS-Klassen von Elementen basierend auf dem Zustand der Komponente zu steuern.

Was ist ngClass?

Dies ist besonders nützlich, wenn das Erscheinungsbild eines Elements als Reaktion auf Datenänderungen angepasst werden soll — zum Beispiel, um ein aktives Element hervorzuheben oder Stile basierend auf dem Status anzuwenden.

ngClass unterstützt Objektsyntax, Arrays von Zeichenfolgen und Funktionen, die diese Formate zur dynamischen Zuweisung von Klassen zurückgeben.

Objektsyntax

Verwenden Sie ein Objekt, bei dem die Schlüssel Klassennamen sind und die Werte boolesche Bedingungen. Ist die Bedingung true, wird die Klasse angewendet.

In diesem Beispiel werden Klassen basierend auf dem Wert der Eigenschaft isActive in der Komponente hinzugefügt oder entfernt.

Wenn isActive auf true gesetzt ist, wird die Klasse active hinzugefügt und inactive entfernt. Ist isActive auf false, geschieht das Gegenteil.

Array von Strings

Verwenden eines Arrays, in dem jeder String einen CSS-Klassennamen darstellt, der dem Element hinzugefügt wird. Dieser Ansatz ist nützlich, wenn mehrere Klassen dynamisch und ohne Bedingungen angewendet werden sollen.

Hier werden die in dem Array aufgeführten Klassen auf das Element angewendet.

Die Verwendung eines Arrays ist hilfreich, wenn Sie mehrere Klassen dynamisch zuweisen möchten – insbesondere, wenn die Anzahl der Klassen variieren kann.

Funktion

Verwenden Sie eine Funktion, die eines der unterstützten Formate zurückgibt: ein Objekt, ein Array von Strings oder einen einzelnen String. Dies ist nützlich, wenn die angewendeten Klassen von komplexerer Logik oder dynamischen Bedingungen abhängen.

ngClass kann auch eine Funktion akzeptieren, die je nach definierter Logik ein Objekt, Array oder einen String zurückgibt.

In diesem Fall gibt die Methode getClass() ein Objekt zurück, bei dem die CSS-Klassennamen als Schlüssel und boolesche Bedingungen als Werte dienen.

• Wenn isError auf true steht, wird die error-class angewendet;
• Wenn isSuccess auf true steht, wird die success-class angewendet;
• Wenn beide auf false stehen, werden keine Klassen hinzugefügt.

Was ist ngStyle?

Mit ngStyle können Eigenschaften wie Hintergrundfarbe, Schriftart, Größe, Positionierung und mehr direkt aus der Komponente heraus geändert werden.

Wie funktioniert ngStyle?

ngStyle akzeptiert ein Objekt, bei dem die Schlüssel CSS-Eigenschaftsnamen sind und die Werte Ausdrücke, die während des Renderings ausgewertet werden.

Wenn ein Ausdruck einen Wert zurückgibt, wird dieser Wert auf die entsprechende CSS-Eigenschaft des Elements angewendet.

Beispiel mit einem Style-Objekt

In diesem Beispiel ändern wir dynamisch die Textfarbe und die Schriftgröße des Elements:

Wenn textColor auf red und fontSize auf 20px gesetzt ist, werden diese Stile auf das Element angewendet. Dieser Ansatz ermöglicht es, mehrere Stile in einem Ausdruck zu kombinieren und bietet dadurch größere Flexibilität.

Beispiel mit einer Variablen und einem Ausdruck

Wenn Sie Stile basierend auf Logik anwenden müssen, können Sie Ausdrücke direkt im Template verwenden:

Wenn isActive auf true gesetzt ist, wird die Hintergrundfarbe grün; bei false wird sie rot. Hier wird ein ternärer Operator verwendet, um die Logik prägnant und ausdrucksstark zu gestalten.

Beispiel mit einem dynamischen Wert

Ausdrücke in ngStyle können auch auf Methoden basieren. Sie können Komponentenmethoden verwenden, um Stilwerte dynamisch zu berechnen:

In diesem Beispiel gibt die Methode getDynamicStyle() ein Stilobjekt basierend auf dem aktuellen Wert von isDarkMode zurück.

Dies ist besonders nützlich, wenn Stile von externen Bedingungen wie Benutzereinstellungen, Tageszeit oder App-Themes abhängen.

Wann sollte man ngClass gegenüber ngStyle verwenden?

• ngClass verwenden, wenn mit vordefinierten CSS-Klassen gearbeitet wird. Dies ist ideal, wenn Styles an mehreren Stellen wiederverwendet werden und eine zentrale Steuerung über das Stylesheet gewünscht ist;

• ngStyle verwenden, wenn Styles dynamisch und direkt angewendet werden müssen – beispielsweise beim Setzen von Farben, Abmessungen oder anderen visuellen Eigenschaften, die nicht an wiederverwendbare Klassen gebunden sind.

Durch die kombinierte Nutzung von ngClass und ngStyle lässt sich das Erscheinungsbild und Verhalten von Elementen basierend auf Komponentendaten einfach und effizient steuern – ganz ohne manuelle DOM-Anpassungen.