Writable Signals no Angular: entendendo a ideia de forma simples

Os Signals são uma nova forma do Angular lidar com estado. Eles permitem que o framework saiba quando um valor muda e quem está usando esse valor, sem que você precise escrever código extra para isso.

Neste artigo, vamos focar apenas nos Writable Signals, que são os signals que podem ser alterados.

O que é um Signal, em termos simples?

Pense em um signal como uma caixinha que guarda um valor.

Você pode olhar dentro da caixinha
Você pode trocar o valor
Sempre que o valor muda, o Angular é avisado

Esse valor pode ser qualquer coisa:

Um número
Um texto
Um objeto
Uma lista

Criando um Writable Signal

Você cria um writable signal usando a função signal() e passando um valor inicial.


import { signal } from '@angular/core';

const pontos = signal(0);

Aqui:

pontos é o signal
0 é o valor inicial

Lendo o valor de um Signal

Signals são funções.

Para acessar o valor, basta chamá-los:


console.log(pontos()); // 0

Sempre que um signal é lido em um lugar importante (como um template), o Angular passa a observar esse uso automaticamente.

Alterando o valor de um Writable Signal

Existem duas formas principais de alterar o valor.

Usando `.set()`

Use quando você já sabe qual será o novo valor.


pontos.set(10);

Isso substitui o valor atual.

Usando `.update()`

Use quando o novo valor depende do valor anterior.


pontos.update(valorAtual => valorAtual + 1);

Esse é o padrão ideal para:

Contadores
Listas
Estados que crescem ou diminuem

Exemplo prático: contador de tentativas

Imagine um formulário onde você quer contar quantas tentativas o usuário fez.


@Injectable({ providedIn: 'root' })
export class TentativasState {
private readonly _tentativas = signal(0);

tentativas = this._tentativas.asReadonly();

registrarTentativa() {
  this._tentativas.update(v => v + 1);
}

resetar() {
  this._tentativas.set(0);
}
}

Aqui:

O estado real é privado
O componente só pode ler
As mudanças acontecem por métodos bem definidos

Usando o Signal no componente


@Component({
selector: 'app-login',
template: `
  <p>Tentativas: {{ tentativas() }}</p>
  <button (click)="tentar()">Tentar novamente</button>
`
})
export class LoginComponent {
private state = inject(TentativasState);

tentativas = this.state.tentativas;

tentar() {
  this.state.registrarTentativa();
}
}

Sempre que o botão for clicado:

O valor muda
O Angular atualiza a tela automaticamente

Sem subscribe, sem async, sem ChangeDetectorRef.

Transformando um Writable Signal em somente leitura

Quando você usa asReadonly():

O valor continua mudando
Mas ninguém de fora pode alterar diretamente


readonly tentativas = this._tentativas.asReadonly();

Isso ajuda a:

Evitar bugs
Proteger o estado
Centralizar as regras de negócio

Atenção com objetos e listas

Signals não impedem alterações internas em objetos.

⚠️ Evite isso:


usuario().nome = 'João'; // não recomendado

✅ Prefira sempre:


usuario.update(u => ({
...u,
nome: 'João'
}));

Assim o Angular entende que algo mudou.

Resumo

Writable Signals:

✔ Guardam estado

✔ Podem ser lidos chamando como função

✔ Podem ser alterados com set() ou update()

✔ Funcionam muito bem em services

✔ Reduzem código e complexidade

Eles são a base do novo modelo reativo do Angular.

Referência

Este artigo foi adaptado da documentação oficial do Angular, com o objetivo de simplificar a linguagem e facilitar o entendimento dos conceitos apresentados.

Documentação original:

https://angular.dev/guide/signals#using-signals-with-rxjs

Acesso em: 22 de jan de 2026.