Signals

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.

---

Exemplo: Contador

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.

---

Incrementar e decrementar

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);
}

---

HTML

No HTML, basta criar um h1 e os botões:

<h1>{{ count() }}</h1>
<button (click)="decrementCount()">-</button>
<button (click)="incrementCount()">+</button>

---

Por que usar 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()

---

Evitando números negativos

Se quisermos impedir que o valor fique negativo:

decrementCount() {
  if (this.count() > 0) {
    this.count.update(value => value - 1);
  }
}

---

Usando computed (Par ou Ímpar)

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.

---

Código atual

TS

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);
    }
  }

}

HTML

<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.

---

Usando set (Reset)

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);
}

---

Código final

TS

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);
  }

}

HTML

<h1>{{ count() }} - {{ isEven() ? 'Par' : 'Ímpar' }}</h1>
<button (click)="decrementCount()">-</button>
<button (click)="incrementCount()">+</button>
<button (click)="resetCount()">Reset</button>

---

Resumo

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

---

Conclusão

É isso pessoal, Signals têm outras coisas para explorar, mas o conteúdo que abordamos aqui já é suficiente para construir coisas bem legais.