Welke soorten bindingen zijn er in Angular?

In Angular zijn er verschillende soorten bindingen die het mogelijk maken om gegevens tussen de component en de template te synchroniseren:

Eigenschapsbinding (Property Binding): Hiermee kun je de HTML-eigenschap van een element koppelen aan een eigenschap van de component. Wijzigingen in de waarde van de eigenschap van de component worden bijgewerkt in de HTML-eigenschap. Gebruikt vierkante haakjes [].
```
<img [src]="imageUrl" alt="Afbeelding">
```
Interpolatie: Hiermee kun je de waarde van een eigenschap van de component weergeven in de template als een string. Gebruikt dubbele accolades {{}}.
```
<p>{{ greeting }}</p>
```
Event Binding (Gebeurtenisbinding): Hiermee kun je reageren op DOM-gebeurtenissen (bijvoorbeeld klikken, tekst invoeren) en methoden van de component aanroepen. Gebruikt ronde haakjes ().
```
<button (click)="onClick()">Klik mij</button>
```
Twee-weg binding (Two-Way Binding): Combineert eigenschapsbinding en gebeurtenisbinding, waardoor de waarde tussen een formulier-element en een eigenschap van de component in beide richtingen gesynchroniseerd wordt. Gebruikt de syntax [(ngModel)]. Vereist het importeren van FormsModule.
```
<input [(ngModel)]="userName" type="text">
```
Attribuutbinding (Attribute Binding): Wordt gebruikt om HTML-attributen te binden die geen eigenschappen van het DOM zijn (bijvoorbeeld colspan, aria-*). Gebruikt de prefix attr..
```
<td [attr.colspan]="colspanCount"></td>
```
Klasse binding (Class Binding): Hiermee kunnen CSS-klassen dynamisch worden toegevoegd of verwijderd op basis van de waarde van een eigenschap van de component.
```
<div [class.active]="isActive"></div>
```
Stijl binding (Style Binding): Hiermee kunnen CSS-stijlen worden ingesteld op basis van de waarde van een eigenschap van de component.
```
<div [style.backgroundColor]="bgColor"></div>
```