📊 Capítulo 05: Signal Inputs & Signal Outputs

Especialização em Frontend com Angular

🗺️ A Nova Comunicação Reativa e Type-Safe entre Componentes

flowchart TD
    PAI["Componente Pai (PaiComponent)"]
    --> |"[produto]='p' (Passa Signal ou Valor)"| INPUT_SIGNAL["input.required<Produto>() (Input Signal no Filho)"]
    INPUT_SIGNAL --> COMPUTED["valorComDesconto = computed(() => this.produto().preco * 0.9)"]
    COMPUTED --> DOM_FILHO["Template do Filho renderiza dados reativos!"]
    EVENTO["Usuário clica em 'Comprar'"] --> OUTPUT_SIGNAL["comprar = output<string>() (Signal Output)"]
    OUTPUT_SIGNAL --> |"(comprar)='onComprar($event)'"| PAI

    style PAI fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style INPUT_SIGNAL fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style COMPUTED fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style DOM_FILHO fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style EVENTO fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style OUTPUT_SIGNAL fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px

🎯 Slide 1: `input()` e `input.required()`

export class CardProdutoComponent {
  // Input obrigatório fortemente tipado como Signal!
  produto = input.required<Produto>();

  // Input opcional com valor padrão e transformação integrada:
  quantidade = input(1, { transform: (v: number | string) => Number(v) });
}

🎯 Slide 2: Reatividade Derivada Direta

Como produto é um Signal, você pode criar valores calculados com computed() diretamente no construtor ou corpo da classe sem precisar de ngOnChanges!

🎯 Slide 3: Novo `output()` API

export class BotaoAcaoComponent {
  // Substitui @Output() e EventEmitter sem overhead de RxJS!
  clicado = output<number>();

  executar() {
    this.clicado.emit(42);
  }
}