O Angular Signals é uma nova funcionalidade introduzida no Angular 16 que permite rastrear e lidar com alterações de estados da aplicação de forma mais granular. Isso permite que o Angular otimize seu mecanismo de detecção de mudanças (CD), recalculando apenas o que realmente importa.

Neste artigo, aprenderemos sobre:

• O que é um Signal
• Tipos de Signals
• Como criar um Writable Signal
• Como alterar o valor de um Writable Signal
• Como criar um Computed Signal

No primeiro artigo sobre Angular Signals, vimos a motivação principal para a criação dessa funcionalidade (acesse aqui). No artigo de hoje, vamos explorar como o Angular Signals funciona e como ele pode ser usado para melhorar o desempenho de aplicações Angular. Além disso, VOCÊ irá escrever seu primeiro signal. Mas o que é um...

Signal

Um Signal é um wrapper em torno de um valor que notifica os consumidores(Consumers) interessados quando esse valor muda. Os Signals sempre devem conter um valor, e podem conter qualquer valor, desde primitivos simples até estruturas de dados complexas.

Essa forma mais granular nos permitirá, no futuro, escrever componentes com desempenho incrível em aplicativos totalmente sem zona(zoneless), eliminando a sobrecarga e as peculiaridades do zone.js.

Tipos de Signals

Existem dois tipos de Signals: Writable Signals e Read-Only Signals.

Writable Signals: podem ser alterados por qualquer componente ou serviço que os consuma.
Read-Only Signals: só podem ser lidos, mas não alterados.

Criando um Writable Signal

Para criar Writable Signal, chamamos a função signal, passando seu valor inicial.

import { signal } from '@angular/core';

const value: WritableSignal<number> = signal(1);

// Signals são getter functions.
console.log(value()) // 1

Alterando o valor de um Writable Signal

O valor de um Writable Signal pode ser alterado usando o método set()

value.set(2)

O método update() também pode ser usado para recalcular o valor usando o valor anterior.

value.update(prevValue => prevValue + 1)

Partiu codar!!

Para facilitar a compreensão dos conceitos, criei um playground onde você pode usar os métodos do Writable Signal que aprendemos em um componente. Neste exemplo, implementamos uma funcionalidade básica de contador.

Desafio 1: Count Signals

Criando um Computed Signal

Computed signals são read-only(apenas leitura) signals que derivam seu valor de outros signals. Imagine que você tem um salário de R$ 3.000 e todo mês investe 10% dele. Se você receber um aumento de 20%, o valor do seu investimento também aumentará.

No caso da analogia do salário, o valor dos 10% de investimento é uma expressão que depende do salário. Se o salário mudar, o valor do investimento também mudará.

Um computed signal pode ser usado para representar o valor dos 10% de investimento. Isso torna mais fácil manter seu código atualizado quando o salário for alterado.

O signal investment depende do signal salary. Sempre que o salary atualizar, o angular sabe que o investment precisa ser recalculado.

Para criar um computed signal, nós chamamos a função computed passando como argumento uma callback.

const salary: WritableSignal<number> = signal(3000);
const investment: Signal<number> = computed(() => salary() * 0.10);

🚨 Computed Signals podem também ser baseados em outros computed signals!

Partiu codar!!

Para facilitar a compreensão dos conceitos, criei um playground onde você pode usar os métodos do Computed Signal que aprendemos em um componente. Neste exemplo, implementamos uma funcionalidade básica de distribuição do salário para investimentos.

Desafio 2: Salary Signals

Conclusão

Angular Signals é uma nova funcionalidade poderosa que pode ser usada para melhorar o desempenho de aplicações Angular. Signals permitem que você rastreie e lide com alterações de estados da aplicação de forma mais granular, o que permite que o Angular otimize seu mecanismo de detecção de mudanças (CD).

Saimos da teoria e VOCÊ realizou dois exemplos práticos de como usar Signals:

• Um contador básico
• Uma distribuição de salário para investimentos

Espero que este artigo tenha ajudado você a entender melhor como Angular Signals funciona e como ele pode ser usado para melhorar o desempenho de suas aplicações Angular.

Parabéns por chegar até aqui! 🎉

Agradeço por dedicar seu tempo à leitura do artigo sobre signals no Angular e espero que continuemos a trocar conhecimentos valiosos. No próximo artigo da série de signals, vamos discutir o conceito de Producer/Consumer utilizando analogias e imagens para maior entendimento.

Com gratidão,
Matheus Rian
☝️ Me siga para receber novos conteúdos e artigos!

Referências
https://angular.dev/
https://angular-signals.dev/