Angular Signals

O Angular Framework oficialmente chegou em sua versão 16 e alguns novos recursos interessantes foram adicionados. Neste tópico, falaremos sobre um deles: os Signals. Vamos desmistificar o assunto e entender como aplicar esse recurso capaz de melhorar a velocidade de sua aplicação de maneira simplificada.

Índice

• Entendendo os Signals
• Sintaxe
• Funções set, update e mutate
• Função effect
• Conclusão

Entendendo os Signals

Assim como uma variável, um Signal armazena um valor que pode ser alterado conforme a vontade do desenvolvedor. Contudo, diferentemente de uma variável, um Signal consegue identificar os lugares e componentes de uma aplicação que usam o seu valor, emitindo um sinal para estes quando houver alterção.

Exemplificando de maneira muito simples, imagine que você está desenvolvendo um sistema de vendas e possui 3 variáveis declaradas: ValorProdutoUnitário, QuantidadeVendas e ValorBruto.

export class Vendas {
valorProdutoUnitario: number = 10;

quantidadeVendas: number = 15;

valorBruto: number = 150;
}

Caso o valor unitário ou a quantidade de vendas mude, é necessário realizar as demais mudanças manualmente, com funções que sejam executadas em eventos para adequar o sistema. Com os Signals, podemos dinamizar não só este processo, mas também muitos outros.
Quando um Signal é alterado, ele emite um sinal para que os componentes que o referenciam, fazendo assim com que atualizem seu valor.

Sintaxe

Como declarar e referenciar um Signal.

Declarando

import { signal } from '@angular/core';
//[...]
//Declarando um Signal. Seu valor inicial é o de dentro do parêntesis
quantidadeVendas = signal(15);
valorProdutoUnitario = signal(10);

Referenciando

//Para que o valor do Signal seja acessível, deve-se 
//colocar os parêntesis. Exatamente como uma função.
console.log(this.quantidadeVendas());

Signals dependentes

Cria-se um Signal à partir de outro

import { computed } from '@angular/core';
//Neste caso, quando a quantidade de vendas ou o preço 
//unitário mudarem, o valor bruto será atualizado automaticamente.
valorBruto = computed(() => 
  this.quantidadeVendas() * this.valorProdutoUnitario()
);

Alterando um Signal

set

Atribui diretamente um novo valor ao Signal e notifica os dependentes

this.valorProdutoUnitario.set(10);
console.log(this.valorProdutoUnitario());
//10

update

Atualiza o valor do Signal baseado no valor atual. Recebe uma função de callback, onde o retorno é o novo valor do Signal.

this.valorProdutoUnitario.update(() => 100);
console.log(this.valorProdutoUnitario());
//100
this.valorProdutoUnitario.update((b) => b + 100);
console.log(this.valorProdutoUnitario());
//200

mutate

Usado principalmente com arrays. Modifica o conteúdo do valor de um Signal, não o valor como um todo. Ex: elementos de um array.

this.objetoExemplo.mutate(i => i.preco = i.preco + (i.preco * .20));
//Altera a propriedade "preco" do objetoExemplo, adicionando 20% de seu valor.

Effect

Possibilita a execução de uma função toda vez que um Signal sofrer alteração.

import { effect } from '@angular/core';
//Ao início do componente em questão, define que devemos 
//logar valor do Signal no console quando alterado
ngOnInit(): void {
  effect(() => {
     console.log(this.valorProdutoUnitario());
  });
}

Assim, sempre que alterado, o novo valor de valorProdutoUnitario será logado no console do navegador.

Conclusão

Estes novos recursos possibilitam um código mais dinâmico e menos poluído, visto que retiram a necessidade de atualizar valores dependentes manualmente, diminuindo a quantidade de linhas de código escritas, aumentando a performance e simplificando o desenvolvimento.