Angular Signals en profondeur

Publié le 15 janvier 2024

Comprendre le nouveau modèle de réactivité d'Angular avec les Signals, Effects et Computed.

Introduction

Angular 17 introduit les Signals comme primitive de réactivité. Contrairement à RxJS, les Signals sont synchrones et granulaires.

Créer un Signal

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

const count = signal(0);
const doubled = computed(() => count() * 2);

effect(() => {
  console.log(`Count: ${count()}, Doubled: ${doubled()}`);
});

count.set(5); // logs: Count: 5, Doubled: 10

Mettre à jour un Signal

// Remplacement direct
count.set(10);

// Mise à jour basée sur la valeur courante
count.update(n => n + 1);

Diff : avant / après

// Approche RxJS (avant)
private count$ = new BehaviorSubject(0);
readonly doubled$ = this.count$.pipe(map(n => n * 2));
this.count$.next(5);

// Approche Signals (après)
count = signal(0);
doubled = computed(() => this.count() * 2);
this.count.set(5);

Conclusion

Les Signals simplifient le code de gestion d’état pour les cas simples et s’intègrent progressivement avec RxJS via toSignal et toObservable.