Welche Bindungstypen gibt es in Angular?

In Angular gibt es verschiedene Arten der Bindung, die es ermöglichen, Daten zwischen der Komponente und der Vorlage zu synchronisieren:

Property Binding (Eigenschaftsbindung): Ermöglicht das Binden der HTML-Eigenschaft eines Elements an eine Eigenschaft der Komponente. Änderungen am Wert der Eigenschaft der Komponente aktualisieren den Wert der HTML-Eigenschaft. Wird mit eckigen Klammern [] verwendet.
```
<img [src]="imageUrl" alt="Bild">
```
Interpolation: Ermöglicht die Anzeige des Werts einer Eigenschaft der Komponente in der Vorlage als String. Verwendet doppelte geschweifte Klammern {{}}.
```
<p>{{ greeting }}</p>
```
Event Binding (Ereignisbindung): Ermöglicht das Reagieren auf DOM-Ereignisse (z.B. Klicks, Texteingaben) und das Aufrufen von Methoden der Komponente. Wird mit runden Klammern () verwendet.
```
<button (click)="onClick()">Klick mich</button>
```
Two-Way Binding (Zwei-Wege-Bindung): Kombiniert Property Binding und Event Binding, um den Wert zwischen einem Formularelement und einer Eigenschaft der Komponente in beide Richtungen zu synchronisieren. Verwendet die Syntax [(ngModel)]. Erfordert den Import von FormsModule.
```
<input [(ngModel)]="userName" type="text">
```
Attribute Binding (Attributbindung): Wird verwendet, um HTML-Attribute zu binden, die keine Eigenschaften des DOM sind (z.B. colspan, aria-*). Verwendet das Präfix attr..
```
<td [attr.colspan]="colspanCount"></td>
```
Class Binding (Klassenbindung): Ermöglicht das dynamische Hinzufügen oder Entfernen von CSS-Klassen basierend auf dem Wert einer Eigenschaft der Komponente.
```
<div [class.active]="isActive"></div>
```
Style Binding (Stilbindung): Ermöglicht das Festlegen von CSS-Stilen basierend auf dem Wert einer Eigenschaft der Komponente.
```
<div [style.backgroundColor]="bgColor"></div>
```