In fast jeder Anwendung musst du das Aussehen von Elementen basierend auf dem Zustand (State) der Komponente ändern. Ein Button soll vielleicht rot werden, wenn ein Fehler auftritt, oder ein Menü-Eintrag soll hervorgehoben werden, wenn er aktiv ist. Angular bietet dafür zwei primäre Wege: Das direkte Klassen-Binding und die NgClass-Direktive.
Direktes Klassen-Binding (Best Practice)
Für die meisten einfachen Anwendungsfälle empfiehlt sich das direkte Binden einer einzelnen Klasse. Das ist kürzer, performanter und benötigt keinen Import der NgClass-Direktive.
Die Syntax lautet [class.klassen-name]="bedingung". Ist die Bedingung true, wird die Klasse hinzugefügt, bei false (oder null / undefined) wird sie entfernt.
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-button',
template: `
<!-- Die Klasse "active" wird gesetzt, wenn isActive() true ist -->
<button
class="btn"
[class.active]="isActive()"
[class.is-disabled]="isDisabled()"
>
Klick mich
</button>
`
})
export class ButtonComponent {
isActive = signal(false);
isDisabled = signal(true);
}Mehrere statische und dynamische Klassen mischen
Seit neueren Angular-Versionen (V9+) kannst du problemlos normale class-Attribute und dynamische [class.name] Bindings auf demselben Element mischen. Angular kümmert sich im Hintergrund darum, dass sie sich nicht gegenseitig überschreiben.
Du kannst auch das generische [class] Binding nutzen, um mehrere Klassen auf einmal zu übergeben (als String, Array oder Objekt). Dies verhält sich im Prinzip fast identisch zu [ngClass].
<!-- String -->
<div [class]="'first second'"></div>
<!-- Array -->
<div [class]="['first', 'second']"></div>
<!-- Objekt (Key = Klassenname, Value = Bedingung) -->
<div [class]="{'first': true, 'second': false}"></div>Die NgClass Direktive
Die NgClass-Direktive ist der klassische Weg, um mehrere Klassen auf einmal dynamisch zu verwalten. Bevor du sie (in einer Standalone-Komponente) nutzen kannst, musst du sie – oder das CommonModule – importieren.
import { Component } from '@angular/core';
import { NgClass } from '@angular/common'; // Import notwendig!
@Component({
selector: 'app-status',
template: `
<!-- Nutzung mit einem Objekt -->
<div [ngClass]="{
'status-badge': true,
'error': hasError,
'success': !hasError
}">
Status
</div>
<!-- Nutzung mit einem Array -->
<div [ngClass]="['status-badge', currentStatus]">
Status
</div>
`,
standalone: true,
imports: [NgClass]
})
export class StatusComponent {
hasError = true;
currentStatus = 'pending'; // 'pending', 'error' oder 'success'
}Wann verwende ich was?
- Einzele Klasse an/ausschalten: Nutze immer
[class.name]="bedingung". Das ist am lesbarsten. - Klasse basierend auf einer Variable (z.B. Enum/String) setzen: Nutze
[class]="variable". - Viele Klassen basierend auf komplexen Bedingungen: Nutze
[class]="{...}"oder[ngClass]="{...}". Welches von beiden du nimmst, ist Geschmackssache, wobei[class]den Vorteil hat, dass du keinen Import (NgClass) benötigst.