O que angular-signals faz?
Implemente gerenciamento de estado reativo baseado em signals no Angular v20+. Use para criar estado reativo com signal(), estado derivado com computed(), estado dependente com linkedSignal() e efeitos colaterais com effect(). Aciona em perguntas sobre gerenciamento de estado, conversão de padrões BehaviorSubject/Observable para signals ou implementação de fluxos de dados reativos.
Visão Geral
Esta skill ajuda você a implementar gerenciamento de estado reativo usando a API de Signals do Angular. Signals são primitivas reativas que notificam consumidores quando o estado muda, oferecendo melhor desempenho e código mais limpo em comparação com padrões tradicionais como BehaviorSubject/Observable.
Principais Conceitos
signal()
Cria um estado reativo que pode ser lido e atualizado diretamente.
import { signal } from '@angular/core';
const contador = signal(0);
// Leitura
console.log(contador()); // 0
// Atualização
contador.set(5);
contador.update(valor => valor + 1);
computed()
Cria estado derivado que recalcula automaticamente quando suas dependências mudam.
import { signal, computed } from '@angular/core';
const nome = signal('João');
const saudacao = computed(() => `Olá, ${nome()}!`);
console.log(saudacao()); // "Olá, João!"
nome.set('Maria');
console.log(saudacao()); // "Olá, Maria!" (atualizado automaticamente)
linkedSignal()
Cria um signal vinculado a outro signal ou fonte externa, sincronizando automaticamente.
import { signal, linkedSignal } from '@angular/core';
const usuarioId = signal(1);
const perfil = linkedSignal(() => fetchPerfil(usuarioId()));
// Quando usuarioId mudar, perfil será atualizado automaticamente
effect()
Executa efeitos colaterais sempre que seus signals dependentes mudam.
import { signal, effect } from '@angular/core';
const dados = signal([]);
effect(() => {
console.log('Dados atualizados:', dados());
// Pode chamar APIs, fazer logging, etc.
});
Migração de BehaviorSubject/Observable
Para converter de padrões baseados em Observables para Signals:
Antes:
private estado$ = new BehaviorSubject<string>('inicial');
estado$: Observable<string> = this.estado$.asObservable();
atualizarEstado(novo: string) {
this.estado$.next(novo);
}
Depois:
estado = signal<string>('inicial');
atualizarEstado(novo: string) {
this.estado.set(novo);
}
Exemplo Prático
import { Component, signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-contador',
template: `
<p>Contagem: {{ contagem() }}</p>
<p>Dobro: {{ dobro() }}</p>
<button (click)="incrementar()">+1</button>
`
})
export class ContadorComponent {
contagem = signal(0);
dobro = computed(() => this.contagem() * 2);
log = effect(() => {
console.log('Nova contagem:', this.contagem());
});
incrementar() {
this.contagem.update(v => v + 1);
}
}
Melhores Práticas
- Use
signal()para estado local e mutável. - Use
computed()para estado derivado que deve ser recalculado automaticamente. - Use
effect()apenas para efeitos colaterais (logging, integração com bibliotecas externas). - Evite usar signals em templates como propriedades simples; use
signal()diretamente no template. - Considere migrar gradualmente de BehaviorSubject para signals em novos componentes.