Pular para conteúdo

Aula 05: Comunicação entre Componentes 🔄

Nesta aula, vamos aprender como os componentes "conversam" entre si em uma arquitetura hierárquica usando @Input e @Output.

📢 Fluxo de Dados Hierárquico

No Angular, os dados geralmente fluem do pai para o filho e os eventos do filho para o pai.

graph TD
    P[Componente Pai] -- "@Input" --> F[Componente Filho]
    F -- "@Output (EventEmitter)" --> P

📥 Recebendo Dados: @Input()

O decorator @Input() permite que o componente filho receba valores vindo de seu pai.

No Componente Filho (.ts):

import { Component, Input } from '@angular/core';

@Component({ ... })
export class FilhoComponent {
    @Input() mensagemDoPai: string = '';
}

No Componente Pai (.html):

<app-filho [mensagemDoPai]="'Olá, meu filho!'"></app-filho>

📤 Enviando Eventos: @Output()

O decorator @Output() combinado com EventEmitter permite que o filho envie notificações ou dados de volta para o pai.

No Componente Filho (.ts):

import { Component, Output, EventEmitter } from '@angular/core';

@Component({ ... })
export class FilhoComponent {
    @Output() eventoFilho = new EventEmitter<string>();

    notificarPai() {
        this.eventoFilho.emit('Oi, Pai! Eu mudei.');
    }
}

No Componente Pai (.html):

<!-- Escutando o evento (eventoFilho) -->
<app-filho (eventoFilho)="receberNotificacao($event)"></app-filho>

🧠 Smart vs Dumb Components

  • Smart Components (Pai): Gerenciam dados, fazem chamadas de API e cuidam da lógica de negócio.
  • Dumb Components (Filho): Apenas exibem dados recebidos via @Input e notificam o pai via @Output. São altamente reutilizáveis.

🚀 Prática: Lista de Contatos

Vamos construir um sistema onde: 1. O Pai gerencia uma lista de contatos. 2. O Filho exibe o detalhe de um único contato (@Input). 3. O Filho tem um botão "Excluir" que notifica o pai para remover aquele contato da lista (@Output).

🏁 Mini-Projeto da Aula

Crie um componente Contador. O componente pai deve passar o valor inicial do contador para o filho. O filho deve ter botões de "+" e "-". Toda vez que o valor mudar no filho, ele deve emitir um evento para o pai atualizar o total geral na tela dele.