Angular: computed vs linkedSignal
Veja as diferenças entre o computed e linkedSignal que fazem parte do novo sistema de reatividade do Angular, o Signals.
Desde 2023 os Signals são o novo sistema de reatividade adotado pelo Angular. Inclusive foi um tema abordado por aqui:
Marcelo Ribas Vismari
O propósito dos Signals é servir como base para o framework Angular identificar quando algo muda, por exemplo, quando o estado de um componente é atualizado e o Angular precisa executar o fluxo de detecção de mudanças.
Marcelo Ribas Vismari
Com base nos Signals, o Angular consegue manter sincronizados os dados do componente com o template (a parte HTML), sem depender do Zone.js para detectar essas alterações.
Gravei um video falando sobre o change detector com o Zone.js e o Zoneless do Angular:
Com a introdução dos Signals, o framework disponibilizou o computed. Ele funciona como um valor calculado que depende de outros Signals e lembra um getter. Sempre que algum desses Signals muda, o computed é reavaliado automaticamente. Para quem tem experiência com banco de dados, é parecido com uma View, já que consolida informações e reage às alterações nas tabelas (no caso do Angular não são tabelas, mas sim os Signals).
import {
Component, computed, linkedSignal, signal
} from "@angular/core";
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-linkedsignal",
imports: [FormsModule],
templateUrl: "linkedsignal.html",
})
export class Linkedsignal {
protected readonly protocolo = signal("https");
protected readonly endereco = signal("consolelog.com.br");
protected readonly resultadoComputed = computed(
() => this.protocolo() + "://" + this.endereco(),
);
protected readonly resultadoLinkedSignal = linkedSignal(
() => this.protocolo() + "://" + this.endereco(),
);
}
Exemplo do uso do computed e linkedSignal
<div class="container-fluid mt-3">
<div class="row">
<div class="col">
<div class="d-flex mb-4 gap-3">
<div class="flex-grow-1">
<label for="inputProtocolo" class="form-label">
Protocolo
</label>
<input
(ngModelChange)="protocolo.set($event)"
[ngModel]="protocolo()"
class="form-control"
id="inputProtocolo"
type="text"
/>
</div>
<div class="flex-grow-1">
<label class="form-label" for="inputEndereco">
Endereço
</label>
<input
(ngModelChange)="endereco.set($event)"
[ngModel]="endereco()"
class="form-control"
id="inputEndereco"
type="text"
/>
</div>
</div>
<div class="mb-3">
<label for="inputComputed" class="form-label">
Computed (readonly)
</label>
<input
type="text"
class="form-control text-secondary"
id="inputComputed"
readonly
[value]="resultadoComputed()"
/>
<br />
Valor <code>resultadoComputed()</code>:
<strong>{{ resultadoComputed() }}</strong>
</div>
<div class="mb-3">
<label for="inputLinkedSignal" class="form-label">
LinkedSignal
</label>
<input
(ngModelChange)="resultadoLinkedSignal.set($event)"
[ngModel]="resultadoLinkedSignal()"
class="form-control"
id="inputLinkedSignal"
type="text"
/>
<br />
Valor <code>resultadoLinkedSignal()</code>:
<strong>{{ resultadoLinkedSignal() }}</strong>
</div>
</div>
</div>
</div>
Template do componente
Já o linkedSignal é muito parecido com o computed. A diferença é que o computed não pode ser modificado diretamente, ou seja, ele só fornece os valores com base nas mudanças dos seus Signals. O linkedSignal tem esse comportamento, porém pode aceitar atualizações manuais, permitindo cenários mais flexíveis.
Resultado do componente em execução no navegador
Curso rápido e objetivo de Angular para iniciantes. Aprenda a criar projetos práticos e domine os conceitos essenciais do framework para acelerar sua jornada como desenvolvedor.
Considerações
O computed e linkedSignal a princípio podem parecer ser iguais, mas a grande diferença está na capacidade do linkedSignal pode receber valores de forma manual além de reagir as mudanças de outros Signals.
Links interessantes:
Video postado no YouTube sobre esse assunto:
