AutoInstrucional

Signals e computed

Um signal é a forma do Angular guardar um valor que muda com o tempo. Diferente de uma variável comum, quando um signal muda, tudo que depende dele (o template, um computed, um effect) atualiza sozinho — sem você precisar mandar recalcular nada manualmente.

No MovieRow do FlickPicks, a aba selecionada (Populares, Em cartaz, Mais votados...) é um signal simples — um número, o índice da aba ativa. A partir dele, um computed calcula qual objeto de aba corresponde àquele índice, sem guardar isso em outra variável separada.

protected readonly activeIndex = signal(0);

protected readonly activeTab = computed(
  () => this.tabs()[this.activeIndex()]
);

constructor() {
  effect(() => {
    console.log('Aba ativa agora:', this.activeTab().label);
  });
}

Não esqueça dos parênteses

activeIndex é a caixinha em si; activeIndex() é o valor de dentro dela agora. Esquecer os parênteses é o erro mais comum de quem está começando com signals — o template simplesmente mostra a caixinha em vez do número.

Signals e computed

Quando usar cada um