Angular Signals e Effects

O Angular mudou a forma como lida com a reatividade. Você não precisa mais do Zone.js para detectar cada pequena mudança. Os Signals permitem que o Angular atualize apenas as partes específicas da UI que mudam. Isso torna seus aplicativos mais rápidos e possibilita o modo zoneless.

O que são Signals?

Um signal é um container para um valor reativo. Quando o valor muda, o Angular sabe exatamente quais partes do template atualizar.

  • signal(): Cria um novo signal. Use .set() para substituir um valor ou .update() para alterar um valor com base no atual.
  • computed(): Cria um signal de apenas leitura. Ele deriva seu valor de outros signals. O Angular calcula isso apenas quando você o lê e armazena o resultado em cache.
  • effect(): Executa código quando um signal muda. Use isso para efeitos colaterais (side effects), como logs ou alterações manuais no DOM.

Quando usar Signals vs RxJS

Você não precisa escolher um. Você deve usar ambos para tarefas diferentes.

Use Signals para:

  • Manter o estado da UI.
  • Controlar a renderização do template.
  • Substituir @Input() e @Output().
  • Trabalhar em aplicativos zoneless.

Use RxJS para:

  • Lidar com fluxos assíncronos como HTTP ou WebSockets.
  • Lógica complexa como debouncing ou troca de fluxos (switching streams).
  • Combinar múltiplas sequências de eventos.

Você pode conectá-los usando o rxjs-interop:

  • toSignal(): Converte um Observable em um Signal.
  • toObservable(): Converte um Signal em um Observable.

Novas APIs sem Decorators

O Angular 17+ introduziu novas maneiras de lidar com o fluxo de dados sem o uso de decorators.

  • input(): Um signal de apenas leitura para dados vindos de um componente pai.
  • model(): Um signal editável para two-way binding. Ele substitui o antigo padrão @Input() e @Output().
  • output(): Uma maneira de emitir eventos de um componente filho para um pai. Não é um signal, mas simplifica seu código.

Por que isso é melhor que o React

Se você conhece o React, os conceitos são semelhantes, mas a execução é diferente.

  • Rastreamento Automático: No React, você deve listar as dependências em um array. No Angular, o sistema rastreia automaticamente quais signals você está usando. Você não pode esquecer uma dependência.
  • Atualizações de Precisão: O React frequentemente renderiza novamente componentes inteiros. Os signals do Angular atualizam apenas os nós específicos do DOM que dependem do valor.
  • Sem Stale Closures: Os signals sempre fornecem o valor atual quando você os chama.

Fonte: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn