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.
Top comments (0)