Jakie rodzaje wiązań istnieją w Angularze?

W Angularze istnieje kilka typów wiązań, które pozwalają na synchronizację danych między komponentem a szablonem:

Wiązanie właściwości (Property Binding): Pozwala na powiązanie właściwości HTML elementu z właściwością komponentu. Zmiany wartości właściwości komponentu aktualizują wartość właściwości HTML. Używa się nawiasów kwadratowych [].
```
<img [src]="imageUrl" alt="Obraz">
```
Interpolacja: Pozwala na wyświetlenie wartości właściwości komponentu w szablonie jako ciąg tekstowy. Używa się podwójnych nawiasów klamrowych {{}}.
```
<p>{{ greeting }}</p>
```
Wiązanie zdarzeń (Event Binding): Pozwala na reagowanie na zdarzenia DOM (np. kliknięcia, wprowadzanie tekstu) i wywoływanie metod komponentu. Używa się nawiasów okrągłych ().
```
<button (click)="onClick()">Kliknij mnie</button>
```
Dwukierunkowe wiązanie (Two-Way Binding): Łączy wiązanie właściwości i zdarzeń, umożliwiając synchronizację wartości między elementem formularza a właściwością komponentu w obu kierunkach. Używa się składni [(ngModel)]. Wymaga importu FormsModule.
```
<input [(ngModel)]="userName" type="text">
```
Wiązanie atrybutów (Attribute Binding): Używa się do wiązania atrybutów HTML, które nie są właściwościami DOM (np. colspan, aria-*). Używa się prefiksu attr..
```
<td [attr.colspan]="colspanCount"></td>
```
Wiązanie klas (Class Binding): Pozwala na dynamiczne dodawanie lub usuwanie klas CSS w zależności od wartości właściwości komponentu.
```
<div [class.active]="isActive"></div>
```
Wiązanie stylów (Style Binding): Pozwala na ustawianie stylów CSS w zależności od wartości właściwości komponentu.
```
<div [style.backgroundColor]="bgColor"></div>
```