Quando um componente e seu template interagem, é possível passar dados e eventos entre eles de diferentes maneiras. Isso é chamado de data binding (vinculação de dados).

No Angular, existem quatro tipos de data binding, cada um com um propósito específico.

Vamos analisar como eles funcionam usando um componente de tarefa simples como exemplo:

Aqui, criamos um objeto de tarefa com três propriedades: id, title e completed. Essas propriedades descrevem uma tarefa específica—seu nome e se ela foi concluída.

Interpolação

Por exemplo, se você possui uma variável como task.title, pode envolvê-la em {{ }}, e o Angular irá renderizar seu valor no HTML.

Quando o Angular processa o template, ele encontra a expressão {{ task.title }} e a substitui pelo valor atual de task.title do componente.

Se o valor for 'Buy groceries', é exatamente isso que aparecerá dentro da tag <h3>. O mesmo processo se aplica a quaisquer outros valores que você interpolar.

Portanto, a interpolação é unidirecional: os dados fluem do componente para o template, e o usuário simplesmente visualiza o resultado.

Vinculação de Propriedade

Às vezes, não se deseja apenas exibir texto — é necessário controlar o comportamento de um elemento, como desabilitar um botão, definir a fonte de uma imagem ou marcar uma caixa de seleção.

O Angular permite vincular valores às propriedades de elementos HTML utilizando colchetes.

Imagine que a tarefa já foi concluída (task.completed = true). Nesse caso, queremos que o botão fique desabilitado. Quando o Angular vê [disabled]="task.completed", ele pega o valor do componente e o vincula à propriedade disabled do elemento DOM.

Se o valor for true, o botão será desabilitado. Se for false, o botão permanece ativo.

Novamente, isso é data binding unidirecional: os dados fluem do componente para o template, e o template se ajusta com base no estado atual do objeto task.

Vinculação de Eventos

Para que seu aplicativo responda às ações do usuário (como cliques), o Angular fornece a vinculação de eventos. Quando um usuário interage com um elemento, você pode "capturar" esse evento e chamar um método no seu componente.

Vamos adicionar um método ao componente:

E atualize o template:

Quando o usuário clica no botão, o Angular detecta o evento (click) e chama o método toggleComplete() no componente. Esse método alterna o valor de task.completed. Após isso, o Angular renderiza novamente o template e, graças à interpolação ({{ task.completed ? 'Undo' : 'Complete' }}), o texto do botão é atualizado instantaneamente.

Aqui, o fluxo de dados é unidirecional — do template para o componente (uma ação é passada para dentro).

Vinculação Bidirecional

Às vezes, é necessário que as alterações no template (como digitar em um campo de entrada) atualizem imediatamente o componente — e que as alterações no componente atualizem imediatamente o template. O Angular facilita isso com a vinculação bidirecional usando [(ngModel)].

Importante: Para usar [(ngModel)], é necessário importar o FormsModule — conforme mostrado abaixo:

E aqui está o template:

É aqui que acontece a mágica do two-way binding. Quando um usuário digita no campo de entrada, o Angular atualiza automaticamente task.title dentro do componente. E quando task.title é alterado no componente, o Angular reflete imediatamente essa atualização no campo de entrada.

Diferente dos outros tipos de binding, o two-way binding mantém o componente e o template sempre sincronizados.

Principais Diferenças

Cada um desses métodos de binding possui suas próprias características e é mais adequado para diferentes cenários de interação de dados dentro de uma aplicação.