Aula 05: Comunicação entre Componentes 🔄

Como os Componentes Conversam?

---

📢 A Conversa é Hierárquica

No Angular, um componente pai comanda o filho.

• Pai -> Filho: Via Propriedades (@Input)
• Filho -> Pai: Via Eventos (@Output)

---

📥 @Input()

Abrindo as portas para dados

O pai passa um valor para o filho como se fosse um atributo HTML.

<app-filho [mensagem]="textoPai"></app-filho>

---

📤 @Output()

Notificando o mundo exterior

O filho gera um evento que o pai pode escutar.

<app-filho (onSave)="aoSalvar($event)"></app-filho>

---

🧠 EventEmitter

A ferramenta que dispara o sinal!

@Output() meuSinal = new EventEmitter();

emitir() {
  this.meuSinal.emit('Dados');
}

---

🏠 Smart Components

Aqueles que sabem de tudo.

• Falam com serviços
• Buscam dados
• Ditam as regras

---

🧱 Dumb Components

Os especialistas em visual.

• Recebem via @Input
• Notificam via @Output
• Altamente reutilizáveis

---

🔄 Resumo do Fluxo

1. O Pai envia o dado.
2. O Filho exibe ou edita.
3. O Filho avisa o Pai quando termina.

---

🚀 Prática

Vamos criar um sistema de votos para candidatos!

O pai tem a lista, o filho tem o botão de voto.

---

❓ Perguntas?

Vamos ao código! 🚀