Aula 03: Data Binding 📡

Conectando Lógica e Interface

---

🔄 O que é Data Binding?

É a comunicação entre o seu código TypeScript e o seu template HTML.

Permite que a interface reaja a mudanças nos dados automaticamente.

---

🔀 Quatro Tipos de Binding

1. Interpolação: {{ valor }} (TS -> HTML)
2. Property Binding: [propriedade] (TS -> HTML)
3. Event Binding: (evento) (HTML -> TS)
4. Two-way Binding: [(ngModel)] (Sincronizado)

---

1️⃣ Interpolação

Exibe strings no HTML.

titulo = 'Curso Angular';

<h1>{{ titulo }}</h1>

---

2️⃣ Property Binding

Controla propriedades de elementos HTML.

<button [disabled]="isButtonDisabled">
  Enviar
</button>

• Usamos colchetes [ ]

---

3️⃣ Event Binding

Captura ações do usuário.

<button (click)="salvar()">
  Salvar
</button>

• Usamos parênteses ( )

---

4️⃣ Two-Way Data Binding

A famosa "Banana in a Box" [( )].

Mantém o campo de input e a variável sincronizados.

---

🍌 Banana in a Box

Por que esse nome?

[( )] -> Os parênteses (banana) dentro dos colchetes (box).

Requer: FormsModule no AppModule.

---

⚙️ Como funciona o NgModel?

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

Se você digita, a variável muda. Se a variável muda via código, o input atualiza!

---

⚖️ Qual escolher?

• Mostrar texto? -> Interpolação
• Mudar atributo (src, href, class)? -> Property
• Ação de botão? -> Event
• Formulário? -> Two-way

---

🎯 Desafio Prático

Crie uma calculadora de soma em tempo real!

---

❓ Alguma dúvida?

Vamos praticar! 🚀