Dynamische Klassen und Styles
Binden Sie Klassen und Styles reaktiv.
Dynamische Klassen und Styles ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Dynamische Gestaltung in Templates
Mit Angular können Sie Klassen und Inline-Stile an den Zustand einer Komponente binden, sodass die Benutzeroberfläche automatisch aktualisiert wird, wenn sich Daten ändern.
Bindung einer einzelnen Klasse
Verwenden Sie [class.name], um eine CSS-Klasse abhängig von einem booleschen Ausdruck ein- oder auszuschalten.
<div [class.active]="isActive">Item</div>
// component
isActive = true;Mehrere Klassen mit ngClass
ngClass wendet mehrere Klassen gleichzeitig an, indem ein Objekt mit Klassennamen und zugehörigen booleschen Werten verwendet wird.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>ngClass mit Arrays und Zeichenketten
ngClass akzeptiert außerdem eine Zeichenkette mit Klassennamen oder ein Array.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>Bindung eines einzelnen Stils
Verwenden Sie [style.property], um eine einzelne Inline-CSS-Eigenschaft an einen Wert zu binden.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";Stilbindungen mit Einheiten
Fügen Sie ein Einheiten-Suffix an, um numerische Werte mit Einheiten wie Pixeln oder Prozentangaben zu binden.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;Mehrere Stile mit ngStyle
ngStyle legt mehrere Inline-Stile gleichzeitig anhand eines Objekts fest.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>Bei Konflikten hat die Klassenbindung Vorrang
Wenn sich statische und gebundene Klassen überschneiden, führt Angular sie zusammen. Die Bindung steuert, ob die dynamische Klasse vorhanden ist, ohne statische Klassen zu entfernen.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->Auf den Zustand reagieren
Bindungen werden während der Änderungserkennung erneut ausgewertet. Wenn Sie eine Eigenschaft der Komponente aktualisieren, wird das Element daher sofort neu gestaltet.
toggle() {
this.isActive = !this.isActive;
}Klasse oder Stil wählen
Bevorzugen Sie für eine bessere Wartbarkeit Klassenbindungen mit CSS-Regeln. Verwenden Sie direkte Stilbindungen nur für tatsächlich dynamische Werte wie eine berechnete Breite oder Farbe.
Mit Signals
Klassen- und Stilbindungen funktionieren auch mit Signals. Rufen Sie das Signal einfach im Template-Ausdruck auf.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);Schnelltest
Testen Sie Ihr Verständnis dynamischer Klassen und Stile.
Zusammenfassung
Schalten Sie eine Klasse mit [class.name] oder mehrere mit ngClass um. Legen Sie einen Stil mit [style.prop] (optional mit Einheit) oder mehrere mit ngStyle fest. Bindungen reagieren automatisch auf Zustandsänderungen, auch bei Signals.
Häufig gestellte Fragen
Ist die Lektion „Dynamische Klassen und Styles“ kostenlos?
Ja — der vollständige Text von „Dynamische Klassen und Styles“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dynamische Klassen und Styles“?
Binden Sie Klassen und Styles reaktiv. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Dynamische Klassen und Styles“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Component-spezifische Styles
- Modi der View-Kapselung
- Host- und Host-Context-Styling
- Dynamische Klassen und Styles