Entendendo os conceitos base dos Signals
Publicado em 27 de abril de 2026
Signals basicamente são valores reativos que notificam automaticamente os conteúdos que dependem deles (ex: componentes, templates) sempre que esse valor muda.
O lado bom é que eles atualizam apenas a parte exata do DOM que foi alterada, melhorando a performance e reduzindo a dependência do Zone.js.
Para entender melhor o que é Signal, vamos fazer um exemplo de um contador.
Vamos começar criando o signal na classe do componente, assim:
count = signal(0)
Se não importar sozinho, basta clicar em cima do nome que ele faz o import automático.
Observe que colocamos o valor 0, pois ele precisa de um valor inicial.
Após isso, precisamos criar um método para incrementar e decrementar valores.
Talvez você, assim como eu, tenha pensado em fazer desse jeito:
incrementCount() {
this.count++
}
Mas vai se deparar com um erro, pois ele não é um number e sim um signal.
Então o que fazer?
Simples! Usamos o método update do Signal:
incrementCount() {
this.count.update(value => value + 1);
}
Repare que invocamos o this.count (signal) e usamos o método update, passando uma função:
value => value + 1
Fazemos a mesma coisa para decrementar:
decrementCount() {
this.count.update(value => value - 1);
}
No HTML, basta criar um h1 e os botões:
<h1>{{ count() }}</h1>
<button (click)="decrementCount()">-</button>
<button (click)="incrementCount()">+</button>
count() e não count?Talvez você esteja se perguntando:
por que
{{ count() }}e não{{ count }}?
Porque count não é um número direto, e sim um Signal.
Para acessar o valor dentro dele, precisamos chamar como função:
count()
Se quisermos impedir que o valor fique negativo:
decrementCount() {
if (this.count() > 0) {
this.count.update(value => value - 1);
}
}
Agora, e se quisermos exibir se o número é par ou ímpar?
Para isso usamos o computed, que serve para criar um valor que depende de um ou mais signals.
isEven = computed(() => this.count() % 2 === 0);
Aqui usamos o operador módulo (%) para verificar se o resto da divisão por 2 é 0.
import { Component, computed, signal } from '@angular/core';
@Component({
selector: 'app-root',
imports: [],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
count = signal(0)
isEven = computed(() => this.count() % 2 === 0);
incrementCount() {
this.count.update(value => value + 1);
}
decrementCount() {
if (this.count() > 0) {
this.count.update(value => value - 1);
}
}
}
<h1>{{ count() }} - {{ isEven() ? 'Par' : 'Ímpar' }}</h1>
<button (click)="decrementCount()">-</button>
<button (click)="incrementCount()">+</button>
Repare que, à medida que vamos incrementando e decrementando, é exibido se o número é par ou ímpar.
Por fim, temos o método set, que usamos quando queremos definir um valor específico.
No nosso caso, podemos usar para resetar o contador:
resetCount() {
this.count.set(0);
}
import { Component, computed, signal } from '@angular/core';
@Component({
selector: 'app-root',
imports: [],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
count = signal(0)
isEven = computed(() => this.count() % 2 === 0);
incrementCount() {
this.count.update(value => value + 1);
}
decrementCount() {
if (this.count() > 0) {
this.count.update(value => value - 1);
}
}
resetCount() {
this.count.set(0);
}
}
<h1>{{ count() }} - {{ isEven() ? 'Par' : 'Ímpar' }}</h1>
<button (click)="decrementCount()">-</button>
<button (click)="incrementCount()">+</button>
<button (click)="resetCount()">Reset</button>
Segue um resumo básico das 3 peças importantes dos Signals:
set()
→ quando eu quero definir/substituir um valor diretamente
update()
→ quando eu quero calcular o novo valor usando o valor atual
computed()
→ quando eu quero criar um valor que depende de um ou mais signals
É isso pessoal, Signals têm outras coisas para explorar, mas o conteúdo que abordamos aqui já é suficiente para construir coisas bem legais.
Carregando comentários...