🚀 Capítulo 04: Event Binding e Two-Way Binding

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de capturar ações do usuário na tela (como cliques em botões) e sincronizar dados em tempo real nas duas direções (da tela para o código e do código para a tela) usando Two-Way Binding.

---

🏢 O Cenário Prático (Seu Desafio)

Um painel de controle precisa ser interativo! Seu desafio hoje é criar um botão para Disparar os Lasers da nave e um campo de comunicação onde o piloto possa digitar as coordenadas do destino e vê-las atualizadas instantaneamente!

---

🧠 Fundamentos: A Teoria Traduzida

Até agora vimos dados indo do código para a tela. Agora vamos ver o caminho inverso e a via de mão dupla.

1. Event Binding (Ligação de Evento) ( )

Serve para escutar eventos do HTML (como cliques, passar o mouse, digitar) e executar uma função que está no seu arquivo TypeScript.

• Sintaxe: (evento)="funcao()"
• Exemplo: <button (click)="atirar()">Fogo!</button>

2. Two-Way Binding (Via de Mão Dupla) [( )]

Serve para quando você quer que a tela e o código estejam sempre sincronizados. Se o usuário digitar algo no campo de texto (HTML), a variável no TypeScript muda na hora. Se o TypeScript mudar a variável, o texto na tela muda na hora!

• Sintaxe: [(ngModel)]="variavel"
• Exemplo: <input [(ngModel)]="nome">
• Nota: Para usar o ngModel, precisamos importar o FormsModule no nosso módulo/componente.

---

📖 Exemplo Guiado: Disparando Lasers e Definindo Destino

Vamos atualizar nosso arquivo TypeScript e HTML.

🛠️ Passo a Passo (TypeScript)

Abra src/app/painel-controle/painel-controle.component.ts e adicione a variável e o método:

export class PainelControleComponent {
  destino: string = 'Tatooine';
 
  atirar() {
    alert('💥 Cabum! Lasers disparados!');
  }
}

🛠️ Passo a Passo (HTML)

Abra src/app/painel-controle/painel-controle.component.html e adicione o botão e o input:

<div class="painel">
  <!-- Event Binding -->
  <button (click)="atirar()">Disparar Lasers</button>
 
  <hr>
 
  <!-- Two-Way Binding -->
  <label>Definir Novo Destino:</label>
  <input [(ngModel)]="destino" type="text">
  <p>Rota traçada para: **{{ destino }}**</p>
</div>

⚠️ Importante: Habilitando o ngModel

Se você receber um erro dizendo que ngModel não é conhecido, faça o seguinte:

1. Abra o arquivo src/app/app.component.ts (ou o arquivo de módulo se seu projeto usar módulos).
2. Adicione o FormsModule nos imports:

import { FormsModule } from '@angular/forms';
 
@Component({
  // ...
  imports: [FormsModule], // Se for standalone component
})

🕹️ Como Executar e Testar no VS Code

1. Salve tudo e execute ng serve.
2. Clique no botão e veja o alerta dos lasers.
3. Digite um novo planeta no campo de texto e veja o texto abaixo mudar na mesma hora!

---

🛠️ Prática Obrigatória 1

Crie um botão chamado “Alternar Escudos”. Crie uma função no TypeScript que mude o valor da variável escudoLigado de true para false (e vice-versa) a cada clique.

---

🛠️ Prática Obrigatória 2

Crie um campo de texto usando [(ngModel)] para que o piloto digite o seu “Codinome”. Exiba o codinome em maiúsculo na tela usando interpolação (Dica: use .toUpperCase() na variável).

---

📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

Siga o mesmo padrão: faça o commit com a mensagem Finaliza Capítulo 04, dê o push e envie o link no Teams.

---

💡 Checkpoint de Lógica

O Two-Way Binding é o que torna os sistemas modernos tão fluidos. Você não precisa de um botão “Salvar” ou “Atualizar” para ver o resultado do que acabou de digitar!

---

🔥 Desafio de Fixação (Opcional)

Tente fazer com que o botão de “Disparar Lasers” fique desabilitado se o escudo estiver ligado (afinal, não queremos atirar no nosso próprio escudo!).

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No .ts:

escudoLigado: boolean = true;
 
alternarEscudo() {
  this.escudoLigado = !this.escudoLigado;
}

No .html:

<button (click)="alternarEscudo()">Alternar Escudos</button>
<p>Status: {{ escudoLigado ? 'Ligado' : 'Desligado' }}</p>

Prática 2:

No .ts:

codinome: string = '';

No .html:

<input [(ngModel)]="codinome" placeholder="Digite seu codinome">
<p>Bem-vindo, Agente {{ codinome.toUpperCase() }}</p>

---

← Capitulo Anterior | Proximo Capitulo →