Módulo 5: Input e Output

2. Resumo da Aula Anterior

No Módulo 4, aprendemos a usar *ngIf e *ngFor para controlar o que aparece no ecrã. Hoje, vamos aprender como os componentes "falam" uns com os outros: como um componente Pai envia ordens para um Filho e como o Filho responde ao Pai.

3. O Que Vais Aprender Hoje

✅ O decorador @Input(): Receber dados.
✅ O decorador @Output(): Enviar avisos/eventos.
✅ A classe EventEmitter.
✅ Hierarquia de componentes (Pai e Filho).

4. Teoria: A Conversa de Família

Conceito: Um componente isolado é pouco útil. No Angular, criamos uma hierarquia onde componentes pais coordenam componentes filhos. O `@Input` permite ao pai "injetar" dados no filho, e o `@Output` permite ao filho "gritar" um comando que o pai ouve.

📢 Analogia: O Chefe e o Cozinheiro

Imagina uma cozinha de restaurante:

O Pai (Chefe): É quem manda. Ele usa o @Input para entregar o pedido (os dados) ao cozinheiro.
O Filho (Cozinheiro): Ele recebe o pedido, processa-o e quando termina, usa o @Output para tocar o sino e avisar: "O prato está pronto!".
EventEmitter: É o som do sino que viaja do cozinheiro até ao chefe.

5. Exemplos Práticos

Exemplo 1: @Input (Receber Dados)

O Filho prepara-se para receber um nome.

// filho.component.ts
import { Component, Input } from '@angular/core';

export class FilhoComponent {
  @Input() nomeDoPai: string = "";
}

Exemplo 2: @Output (Enviar Alerta)

O Filho avisa quando o botão foi clicado.

// filho.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

export class FilhoComponent {
  @Output() avisoTerminou = new EventEmitter();

  finalizar() {
    this.avisoTerminou.emit();
  }
}

Exemplo 3: O Pai a Ouvir

Como o pai reage ao evento do filho.

// pai.component.ts
aoTerminar() {
  console.log("Recebi o aviso do filho! Tudo pronto.");
}

6. Agora é a Tua Vez!

Vamos criar o "Contador Remoto":

Cria um componente Filho com um botão "Mais 1".
No Filho, cria um @Output() chamado incrementou.
Ao clicar no botão, o filho faz this.incrementou.emit().
No componente Pai, cria uma variável total = 0.
No Pai, usa o seletor do filho e "ouve" o evento: (incrementou)="total = total + 1".
Vê o número do pai a subir sempre que clicas no botão dentro do componente filho!

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 **@Input()**: Porta de ENTRADA (O pai envia para o filho).
📌 **@Output()**: Porta de SAÍDA (O filho avisa o pai).
📌 **EventEmitter**: A ferramenta usada para disparar o aviso do @Output.
📌 Esta comunicação permite criar componentes genéricos e reutilizáveis em qualquer lugar.

9. Desafios Práticos

Desafio 1: Enviar Dados na Saída

É possível o filho enviar um dado (como um texto) dentro do emit()? Como o pai receberia esse dado no HTML?

Desafio 2: Múltiplos @Inputs

Um componente pode ter 5 decoradores `@Input` diferentes? Sim ou não? Quando é que isso se torna um problema de organização?

Desafio 3: O Componente Card Reutilizável

Imagina que estás a criar um cartão de produto. Quais seriam os `@Input` óbvios que esse componente deveria ter para ser usado em qualquer ecrã de uma loja online?

Aprende Web: Angular

Módulo 5: Input e Output (Comunicação)