📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 02: Templates & Data Binding

Especialização em Frontend com Angular

---

🗺️ As Quatro Formas de Data Binding no Angular

flowchart TD
    TS["Componente TypeScript (Classe / Estado)"]
    --> |"1. Interpolação: {{ titulo }}"| HTML["Template HTML (DOM)"]
    TS --> |"2. Property Binding: [src]='imagemUrl' [disabled]='isCarregando'"| HTML
    HTML --> |"3. Event Binding: (click)='salvar()' (keydown.enter)='enviar()'"| TS
    TS <--> |"4. Two-Way Binding: [(ngModel)]='usuario.nome'"| HTML

    style TS fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style HTML fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

---

🎯 Slide 1: Property Binding vs Interpolação

• Property Binding ([propriedade]="expressao"): Passa valores tipados (booleanos, números, objetos) diretamente para a propriedade do elemento DOM.

• Interpolação ({{ expressao }}): Converte qualquer valor em texto visível na tela.

---

🎯 Slide 2: Event Binding com Pseudo-Eventos

<input (input)="onDigitar($event)" (keydown.enter)="submeterFormulario()" />
<button (click)="salvarItem()">Salvar</button>

• O Angular suporta filtragem de teclas (keydown.enter, keydown.escape) direto no template!

---

🎯 Slide 3: Two-Way Binding Moderno

<input [(ngModel)]="busca" placeholder="Filtrar catálogo..." />

• Sincroniza em tempo real a caixa de texto e a variável no componente. Exige FormsModule nos imports do componente standalone.

---

🔗 Navegação do Capítulo 02

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim