Quais são as diferenças entre os diferentes tipos de ligação de dados no Angular?

No Angular, existem diferentes tipos de ligação de dados que permitem ligar dados entre o componente e o modelo:

• Ligação de Propriedade (Property Binding): liga a propriedade de um elemento DOM a uma expressão do componente. É unidirecional — os dados vão do componente para o modelo.

  <img [src]="imageUrl">
  

• Ligação de Evento (Event Binding): liga um evento do DOM a um manipulador no componente. Permite reagir às ações do utilizador.

  <button (click)="onClick()">Clica em mim</button>
  

• Ligação Bidirecional (Two-way Binding): combina a ligação de propriedade e a ligação de evento para sincronizar dados entre o componente e o modelo. Usado com a sintaxe [(ngModel)].

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

• Interpolação (Interpolation): insere o valor do componente no modelo como texto.

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

A principal diferença está na direção da transmissão de dados e no objetivo: a ligação de propriedade vai do componente para o modelo, a ligação de evento do modelo para o componente, e a ligação bidirecional sincroniza em ambas as direções.