DEV Community

Rafael Serinolli
Rafael Serinolli

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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());
Enter fullscreen mode Exit fullscreen mode

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()
);
Enter fullscreen mode Exit fullscreen mode

Alterando um Signal

set

Atribui diretamente um novo valor ao Signal e notifica os dependentes

this.valorProdutoUnitario.set(10);
console.log(this.valorProdutoUnitario());
//10
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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());
  });
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)