Módulo 3: Property e Event Binding

2. Resumo da Aula Anterior

No Módulo 2, aprendemos a fazer o TypeScript "falar" com o HTML através da Interpolação. Hoje, vamos aprender como controlar propriedades do HTML (como desativar botões) e como fazer o TypeScript "ouvir" o utilizador.

3. O Que Vais Aprender Hoje

✅ Property Binding [propriedade]: Controlar o HTML.
✅ Event Binding (evento): Reagir a cliques e teclas.
✅ Two-Way Binding [(ngModel)]: Sincronia total.
✅ A lógica da "Banana in a Box".

4. Teoria: A Estrada de Dois Sentidos

Conceito: No Angular, a informação viaja em canais específicos. Se queres mudar algo no HTML a partir do código, usas parênteses retos [ ]. Se queres que o código saiba que o utilizador clicou em algo, usas parênteses curvos ( ).

🎮 Analogia: O Comando da Consola

Imagina que estás a jogar um videojogo:

Property Binding [Instrução]: É a consola a dizer ao comando: "Vibra agora!" ou "Acende a luz vermelha!". (Do Cérebro para o Objeto).
Event Binding (Botão): É tu a clicares no botão "X" e o comando a dizer à consola: "O jogador quer saltar!". (Do Objeto para o Cérebro).
Two-Way Binding [(ngModel)]: É quando o comando e a consola estão perfeitamente sincronizados em tempo real.

5. Exemplos Práticos

Exemplo 1: Property Binding [ ]

Desativar um botão via código.

// No .ts
botaoDesativado = true;
corAviso = "red";



Atenção!

Exemplo 2: Event Binding ( )

Reagir a um clique de rato.

// No .ts
aoClicar() {
  alert("Clicaste no botão!");
  this.botaoDesativado = !this.botaoDesativado;
}

Exemplo 3: Two-Way Data Binding [( )]

O valor muda no TS e no HTML ao mesmo tempo.



Olá, {{ nomeUsuario }}!

6. Agora é a Tua Vez!

Vamos criar um "Controlador de Luz":

Cria uma variável luzAcesa = false no teu TypeScript.
No HTML, cria um botão que diz "Ligar/Desligar".
Usa o Event Binding (click) para inverter o valor da variável (luzAcesa = !luzAcesa).
Cria um parágrafo que mostra o texto "A luz está LIGADA" ou "A luz está DESLIGADA" (Bónus: usa interpolação com um IF ternário {{ luzAcesa ? 'LIGADA' : 'DESLIGADA' }}).
Usa o Property Binding [style.background] para mudar a cor de fundo de uma `<div>` para 'yellow' quando a luz estiver acesa.

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 **Property Binding `[ ]`** controla propriedades HTML (src, disabled, style).
📌 **Event Binding `( )`** escuta ações do utilizador (click, input, mouseover).
📌 **Two-Way Binding `[( )]`** mantém o HTML e o TS em sincronia perfeita.
📌 Lembra-te: **Retos** entram dados, **Curvos** capturam eventos.

9. Desafios Práticos

Desafio 1: O Botão Tímido

Como farias para que um botão desaparecesse visualmente (ou fosse filtrado) quando passas o rato por cima dele, usando apenas Event Binding?

Desafio 2: A Banana in a Box

Porque é que o Two-Way Binding [(ngModel)] é chamado de "Banana in a box"?

Desafio 3: Captura de Teclado

Se quiseres que uma função seja chamada apenas quando o utilizador clica na tecla **Enter** num input, como escreverias esse evento no Angular?