Aula 03: Data Binding 📡

Nesta aula, vamos aprender como conectar a nossa lógica (TypeScript) com a nossa interface (HTML) usando o Data Binding.

🔄 O que é Data Binding?

Data Binding é a comunicação automática entre o código (.ts) e o template (.html). Existem quatro tipos principais:

graph TD
    A[Data Binding] --> B[Unidirecional: TS -> HTML]
    A --> C[Unidirecional: HTML -> TS]
    A --> D[Bidirecional: Ambos]

    B --> B1[Interpolação {{ }}]
    B --> B2[Property Binding [ ]]
    C --> C1[Event Binding ( )]
    D --> D1[Two-way Binding [( )]]

1. Interpolação {{ }}

Exibe valores de variáveis da classe diretamente no HTML.

// No arquivo .ts
nome = 'Angular';

<!-- No arquivo .html -->
<h1>Bem-vindo ao {{ nome }}!</h1>

2. Property Binding [ ]

Associa um valor da classe a uma propriedade de um elemento HTML (como src, disabled, href).

imagemUrl = 'assets/logo.png';
botaoDesabilitado = true;

<img [src]="imagemUrl">
<button [disabled]="botaoDesabilitado">Clique aqui</button>

3. Event Binding ( )

Escuta eventos do HTML (cliques, digitação) e executa funções na classe.

aoClicar() {
    alert('Botão clicado!');
}

<button (click)="aoClicar()">Enviar</button>

4. Two-Way Data Binding [(ngModel)]

Mantém o valor sincronizado em ambos os sentidos. Se mudar no HTML (input), muda na classe. Se mudar na classe, muda no HTML.

<input [(ngModel)]="usuario">
<p>Olá, {{ usuario }}!</p>

🏁 Mini-Projeto da Aula

Crie um formulário simples que contenha um campo de texto e um botão. Ao digitar no campo, o texto deve aparecer em tempo real logo abaixo (Two-way binding). Ao clicar no botão, o campo deve ser limpo (Event binding + Property binding).