Angular - Signal

 Pour un entretien, vous pouvez répondre simplement :

Un Signal est un nouvel objet réactif introduit avec Angular 16. Il permet de stocker un état et de notifier automatiquement les composants lorsqu'il change, sans utiliser RxJS ou des Observables dans les cas simples. L'objectif est de simplifier la gestion de l'état et d'améliorer les performances grâce à une détection de changements plus fine.

Exemple

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

count = signal(0);

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

Dans le template :

<p>{{ count() }}</p>
<button (click)="increment()">+</button>

Lorsque increment() est appelé :

• count passe de 0 à 1.
• Angular détecte automatiquement le changement.
• Seuls les composants qui utilisent count sont mis à jour.

---

Les trois concepts principaux

1. signal()

Créer une donnée réactive.

name = signal("Hung");

Lire :

console.log(name());

Modifier :

name.set("John");

---

2. computed()

Créer une valeur calculée automatiquement.

firstName = signal("Hung");
lastName = signal("Dinh");

fullName = computed(() =>
    `${this.firstName()} ${this.lastName()}`
);

Si firstName change, fullName est recalculé automatiquement.

---

3. effect()

Exécuter automatiquement du code lorsqu'un Signal change.

effect(() => {
    console.log(this.fullName());
});

À chaque modification de firstName ou lastName, cet effect est relancé.

---

Comparaison avec RxJS

Avant Angular 16

BehaviorSubject<number>
Observable
subscribe()
unsubscribe()

Exemple :

count$ = new BehaviorSubject(0);

this.count$.next(1);

Il fallait gérer :

• subscribe()
• unsubscribe()
• les fuites mémoire éventuelles

---

Avec Signal

count = signal(0);

count.set(1);

Aucun subscribe().

Angular gère tout automatiquement.

---

Avantages

✅ API beaucoup plus simple

✅ Pas de subscribe() / unsubscribe()

✅ Meilleures performances (mise à jour fine des composants)

✅ Code plus lisible

---

Limites

Signal ne remplace pas complètement RxJS.

RxJS reste très utile pour :

• appels HTTP
• WebSocket
• événements utilisateur
• flux asynchrones complexes
• combinaison de plusieurs flux (merge, switchMap, combineLatest, etc.)

En pratique :

• Signal → gestion de l'état local d'un composant.
• RxJS → gestion des flux asynchrones.

---

Réponse de 30 secondes (entretien)

Les Signals, introduits avec Angular 16, sont un nouveau mécanisme réactif pour gérer l'état d'une application. Ils permettent de mettre à jour automatiquement l'interface lorsqu'une donnée change, sans utiliser subscribe() ou unsubscribe(). Ils simplifient le code et améliorent les performances. En revanche, pour les flux asynchrones comme les appels HTTP ou les WebSockets, je continue à utiliser RxJS.