Care sunt diferențele dintre diferitele tipuri de legare a datelor în Angular?

În Angular, există diferite tipuri de legături de date care permit conectarea datelor între component și șablon:

• Legătura de Proprietate (Property Binding): leagă proprietatea unui element DOM cu o expresie din component. Este unidirecțională — datele merg din component către șablon.

  <img [src]="imageUrl">
  

• Legătura de Eveniment (Event Binding): leagă un eveniment DOM cu un handler în component. Permite reacția la acțiunile utilizatorului.

  <button (click)="onClick()">Apasă-mă</button>
  

• Legătura Bidirecțională (Two-way Binding): combină legătura de proprietate și cea de eveniment pentru a sincroniza datele între component și șablon. Se folosește cu sintaxa [(ngModel)].

  <input [(ngModel)]="username">
  

• Interpolare (Interpolation): inserează valoarea din component în șablon ca text.

  <p>{{ username }}</p>
  

Diferența principală constă în direcția de transmitere a datelor și scopul: legătura de proprietate — din component în șablon, legătura de eveniment — din șablon în component, legătura bidirecțională — sincronizează în ambele direcții.