In Angular spielen Attribut-Direktiven eine zentrale Rolle, um das Verhalten und das Aussehen 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 abhängig vom 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 – beispielsweise zur Hervorhebung eines aktiven Elements oder zur Anwendung von Stilen basierend auf dem Status.

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

Objektsyntax

Verwendung eines Objekts, bei dem die Schlüssel die Klassennamen und die Werte boolesche Bedingungen sind. 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, wobei jeder String einen CSS-Klassennamen darstellt, der dem Element hinzugefügt wird. Dieser Ansatz ist nützlich, wenn mehrere Klassen dynamisch 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

Verwendung einer 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, ein Array oder einen String zurückgibt.

In diesem Fall gibt die Methode getClass() ein Objekt mit CSS-Klassennamen als Schlüsseln und booleschen Bedingungen als Werten zurück.

• Wenn isError true ist, wird die error-class angewendet;
• Wenn isSuccess true ist, wird die success-class angewendet;
• Wenn beide false sind, 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 geändert werden.

Funktionsweise von 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.

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

Beispiel mit einem Style-Objekt

In diesem Beispiel werden die Textfarbe und die Schriftgröße des Elements dynamisch geändert:

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 im Vergleich zu ngStyle verwenden?

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

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

Durch die kombinierte Nutzung von ngClass und ngStyle kann das Erscheinungsbild und Verhalten von Elementen basierend auf Komponentendaten einfach und effizient gesteuert werden – ohne das DOM manuell aktualisieren zu müssen.