~2 min de lecture
🧠 Cheat Sheet RxJS & Signal (Angular v17+)
🔄 RxJS : Concepts de base
| Concept | Écriture externe (.next()) |
Souscription (.subscribe()) |
Rejoue la dernière valeur ? |
|---|---|---|---|
Observable |
❌ | ✅ | ❌ |
Subject |
✅ | ✅ | ❌ |
BehaviorSubject |
✅ | ✅ | ✅ |
🧰 Opérateurs de transformation
| Opérateur | Points clés | Use cases |
|---|---|---|
map |
Transformer une valeur | Adapter une réponse API |
switchMap |
Annule les précédents | Recherche en temps réel |
mergeMap |
Parallélise les appels | Requêtes multiples indépendantes |
exhaustMap |
Ignore les appels si déjà en cours | Boutons d'action non répétables |
🎯 Opérateurs de filtrage
| Opérateur | Rôle | Use cases |
|---|---|---|
filter |
Ne passe que certaines valeurs | Validation simple dans le flux |
distinctUntilChanged |
Ignore les doublons consécutifs | Optimisation de traitements |
debounceTime |
Délai avant émission | Recherche, frappe utilisateur |
🧩 Combinaison de flux
| Opérateur | Émet quand... | Use cases |
|---|---|---|
combineLatest |
Un des flux émet | Construire une vue combinée en direct |
forkJoin |
Tous les flux se terminent | Attendre plusieurs chargements HTTP |
withLatestFrom |
Le flux principal émet | Ajouter une info au moment d’un clic |
🧪 Opérateurs utilitaires
| Opérateur | Rôle | Use cases |
|---|---|---|
tap |
Ajouter un effet sans modifier | Log, animation, debug |
catchError |
Gérer une erreur et récupérer | Valeur par défaut, fallback |
share |
Éviter la duplication d’exécution sans historique | Requêtes HTTP, WebSocket |
shareReplay |
Éviter la duplication d’exécution avec historique | Requêtes HTTP, WebSocket |
🧬 Signal (Angular)
| API | Rôle | Use cases |
|---|---|---|
signal() |
Crée une donnée réactive | Création d'un signal que l'on peut modifier ensuite |
computed() |
Dérive une nouvelle valeur | Création d'un Signal à partir d'un ou plusieurs Signals (lecture seule) |
effect() |
Réagit à un changement | Log, synchronisation d'état... Au changement d'au moins un des Signal utilisé |
linkedSignal() |
Lien avec Reactive Forms | Création d'un Signal à partir d'un ou plusieurs Signals (modifiable) |
🔄 Interopérabilité RxJS ↔️ Signal
| API | Description |
|---|---|
toSignal() |
Convertit un Observable en Signal |
toObservable() |
Convertit un Signal en Observable |
🌐 Ressources avancées avec Angular
| API | Flux supporté | Avantage principal |
|---|---|---|
resource() |
Promise | Gestion complète de l’état async |
httpResource() |
HttpClient Angular | API simplifiée dédiée HTTP |
rxResource() |
RxJS Observable | Réutilisation de services existants |
📚 Envie de creuser Angular ?
👉🏼 ➡️ Découvre EasyAngularKit