Angular Signals
Tags: angular, typescript, programming, braziliandevs
Published: 2023-05-29 18:55:18

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.
<br>

###Índice
- Entendendo os _Signals_
- Sintaxe
- Funções set, update e mutate
- Função effect
- Conclusão
<br>

###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. 

```typescript
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
```typescript
import { signal } from '@angular/core';
//[...]
//Declarando um Signal. Seu valor inicial é o de dentro do parêntesis
quantidadeVendas = signal(15);
valorProdutoUnitario = signal(10);
```
####Referenciando
```typescript
//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
```typescript
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

```typescript
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.
```typescript
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.
```typescript
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.

```typescript
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.