Angular Signals guida completa: dalla A alla Z

Se sviluppi con Angular, preparati a una piccola rivoluzione: gli Angular Signals sono qui per cambiare il modo in cui gestiamo lo stato e le reazioni nei componenti. Se fino a ieri avevi a che fare con @Input, @Output, RxJS e ChangeDetectionStrategy, oggi puoi semplificarti la vita con un approccio più intuitivo e reattivo.

In questa guida completa esploreremo:

• ✅ Cosa sono gli Angular Signals
• 🛠 Come si usano (con esempi pratici)
• 🤔 Perché utilizzarli rispetto agli approcci tradizionali
• 💡 Best practice e consigli d’uso
• 🚀 Casi d’uso reali nei progetti moderni

Cosa sono gli Angular Signals

Gli Signals sono un nuovo primitive reattivo introdotto in Angular 16 per semplificare la gestione dello stato e la reattività. A differenza di RxJS, i Signals:

• Sono sincroni: restituiscono sempre l’ultimo valore disponibile, senza bisogno di subscribe.
• Sono trackable: Angular sa esattamente quando e dove un Signal viene usato, ottimizzando il rendering.
• Non richiedono async pipe, subscribe o unsubscribe.

In pratica, un Signal è una funzione che mantiene uno stato e notifica automaticamente i lettori quando cambia.

Esempio base:

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

export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update(value => value + 1);
  }
}

Nell’HTML:

<p>Contatore: {{ count() }}</p>
<button (click)="increment()">Incrementa</button>

Ogni volta che clicchi, il Signal cambia e Angular aggiorna solo il template interessato — senza Zone.js e senza change detection manuale.

Tipi di Signals e API principali

Angular fornisce diverse funzioni per lavorare con i Signals:

• signal(initialValue): crea un nuovo Signal con un valore iniziale.
• computed(() => ...): crea un Signal derivato, simile a un getter reattivo.
• effect(() => ...): esegue un effetto collaterale ogni volta che un Signal letto cambia.

Esempio pratico:

import { signal, computed, effect } from '@angular/core';

export class PriceCalculatorComponent {
  price = signal(100);
  quantity = signal(1);

  total = computed(() => this.price() * this.quantity());

  constructor() {
    effect(() => {
      console.log('Totale aggiornato:', this.total());
    });
  }
}

Questa combinazione permette di creare logiche complesse in modo dichiarativo e pulito, senza catene di Observables o pipe infinite.

Perché usare gli Angular Signals invece di RxJS?

Non fraintendiamoci: RxJS non va da nessuna parte, ed è ancora potentissimo per scenari asincroni e flussi complessi. Ma per la gestione dello stato locale nei componenti, i Signals portano vantaggi concreti:

• ✅ Meno boilerplate: niente subscribe/unsubscribe.
• ⚡ Reattività più chiara: è immediato capire da dove nasce un valore.
• 🧠 Rendering più efficiente: Angular traccia automaticamente le dipendenze.
• 🧼 Codice più pulito: meno operatori e meno rischio di memory leak.

In breve: usa Signals per lo stato locale e derivato, e RxJS per stream asincroni complessi (come WebSocket, richieste multiple, ecc.).

Esempio completo: Contatore avanzato

Vediamo un esempio più articolato per capire come combinare signal, computed ed effect:

import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-advanced-counter',
  standalone: true,
  template: `
    <p>Valore: {{ count() }}</p>
    <p>È pari? {{ isEven() }}</p>
    <button (click)="increment()">Incrementa</button>
  `,
})
export class AdvancedCounterComponent {
  count = signal(0);
  isEven = computed(() => this.count() % 2 === 0);

  constructor() {
    effect(() => {
      console.log(`Il numero è ${this.isEven() ? 'pari' : 'dispari'}`);
    });
  }

  increment() {
    this.count.update(c => c + 1);
  }
}

Con pochissime righe abbiamo uno stato locale reattivo, derivazioni automatiche e side effect precisi.

Best Practice per usare gli Angular Signals

Per evitare di trasformare i Signals in un caos incontrollato, ecco alcune best practice da seguire:

1. 🧭 Usa Signals per stato locale – per quello globale, valuta un Signal Store o librerie come NgRx Signals.
2. 🧱 Mantieni i Signals semplici – evita di annidarli eccessivamente.
3. 📝 Nomina chiaramente – usa nomi descrittivi e appendi Signal dove utile (es: userSignal).
4. 🚀 Evita side effects nei computed – riservali agli effect().
5. 🔄 Aggiorna lo stato in modo immutabile – soprattutto con oggetti complessi.

Per altre best practice su Angular: Top 8 estensioni di Visual Studio Code per Angular.

Casi d’uso reali nei progetti con Angular Signals

Ecco alcuni scenari in cui i Signals brillano davvero:

• ✅ Gestione di form locali senza FormGroup/Control complicati.
• 🧭 Filtri e ordinamenti su tabelle locali.
• 📊 Calcoli derivati (totali, statistiche, ecc.)
• 🧠 Stato UI (modali aperte, toggle, preferenze…)
• 🧼 Mini store interni a componenti standalone.

Inoltre, grazie alla natura trackable dei Signals, il rendering è super efficiente anche in progetti enterprise complessi.

Leggi anche: Configurare un Ambiente di Sviluppo Angular in Visual Studio Code.

Conclusione

Gli Angular Signals non sono solo una nuova API: sono un cambio di paradigma nel modo di pensare la reattività in Angular. Se usati correttamente, rendono il codice più leggibile, performante e semplice da mantenere.

Inizia da piccoli componenti, sperimenta con signal, computed ed effect, e poco alla volta vedrai il tuo codice diventare più elegante e meno macchinoso.

Hai già iniziato a usare i Signals nei tuoi progetti? Raccontamelo nei commenti