Class-Binding und Style-Binding

String Interpolation und Property Binding werden überwiegend genutzt, um Werte aus dem TypeScript-Code einer Komponente im HTML darzustellen. Doch auch das Erscheinungsbild eines Views lässt sich leicht beeinflussen. Zum Beispiel mit Class Binding. Dabei werden einem HTML-Element CSS-Klassen abhängig von Variablenwerten zugewiesen.

Im folgenden Beispiel verfügt die Komponente über die booleschen Variablen isImportant und isUnderlined, zu denen passende Klassen im CSS definiert sind. Ist eine Variable true, wird die entsprechende Klasse angewendet. Ist sie false, bleibt die Klasse unberücksichtigt. Es können be einem Element problemlos mehrere Variablen verwendet und damit auch mehrere CSS-Klassen gleichzeitig zugewiesen werden.

Als Alternative zum Class Binding bietet Angular die Attribut-Direktive ngClass. Ihre Funktion ist im Beispiel identisch, führt jedoch zu kürzerem und übersichtlicherem Code, sobald mehrere Variablen oder Klassen beteiligt sind. In solchen Fällen ist der Einsatz von ngClass in der Regel die bessere Wahl. 

.important {
  color: red;
  font-weight: bold;
}

.underlined {
  text-decoration: underline;
}
<h2>Sample for Class Binding and ngClass</h2>

<p [class.important]="isImportant">
This text can be bold and red.</p>

<p [class.underlined]="isUnderlined">
This text can be underlined.</p>

<p [class.important]="isImportant" [class.isUnderlined]="isUnderlined">
This text can be bold and red but also underlined.</p>

<p [ngClass]="{ important: isImportant, underlined: isUnderlined }">
This text can be bold and red but also underlined but uses [ngClass] for styling.</p>

<button (click)="toggleImportant()">Toggle Important</button>
<button (click)="toggleUnderlined()">Toggle Underlined</button>
import { Component } from '@angular/core';
import {NgClass} from "@angular/common";

@Component({
  selector: 'app-class-binding',
  standalone: true,
  imports: [
    NgClass
  ],
  templateUrl: './class-binding.component.html',
  styleUrl: './class-binding.component.scss'
})
export class ClassBindingComponent {
  isImportant = false;
  isUnderlined = false;

  toggleImportant() {
    this.isImportant = !this.isImportant;
  }

  toggleUnderlined() {
    this.isUnderlined = !this.isUnderlined;
  }
}

Steht im CSS keine passende Klasse zur Verfügung, lassen sich die Eigenschaften eines HTML-Elements auch direkt manipulieren. Dafür kommt Style Binding zum Einsatz. Die Syntax ähnelt der des Class Bindings, allerdings muss für jede zu ändernde Eigenschaft eine eigene Bedingung angegeben werden. Style Binding eignet sich besonders, wenn nur einzelne CSS-Eigenschaften dynamisch gesteuert werden sollen. Für komplexere visuelle Zustände bleibt ngClass meist übersichtlicher und flexibler. 

h2>Sample for Style Binding</h2>

<p
  [style.color]="isImportant ? 'red' : null"
  [style.fontWeight]="isImportant ? 'bold' : null">
This text can be bold and red.</p>

<p
  [style.textDecoration]="isUnderlined ? 'underline' : null">
This text can be underlined.</p>

<p
  [style.color]="isImportant ? 'red' : null"
  [style.fontWeight]="isImportant ? 'bold' : null"
  [style.textDecoration]="isUnderlined ? 'underline' : null">
This text can be bold and red but also underlined.</p>

<button (click)="toggleImportant()">Toggle Important</button>
<button (click)="toggleUnderlined()">Toggle Underlined</button>
© 2025 Holger Hinzberg Contact