Testez et visualisez les opérateurs RxJS map, filter, switchMap et debounceTime avec un marble diagram interactif et obtenez le code prêt à copier.
Testeur d'opérateurs RxJS — Marble Diagram
🔧 Configuration
valeur@millisecondes.RxJS : comprendre les opérateurs avec un marble diagram
RxJS (Reactive Extensions for JavaScript) est la bibliothèque de programmation réactive au cœur d'Angular. Tout y est flux : un clic, une requête HTTP, la valeur d'un champ de formulaire. Les opérateurs sont les fonctions qui transforment, filtrent et combinent ces flux d'Observable. Le problème ? Beaucoup d'opérateurs ont un comportement temporel difficile à saisir avec une simple lecture de la doc. C'est exactement ce que ce testeur résout : un marble diagram interactif qui montre, en temps réel, comment chaque opérateur agit sur une séquence de valeurs.
Un marble diagram représente un flux comme une ligne de temps horizontale. Chaque « bille » (marble) est une valeur émise, positionnée selon son instant d'émission ; une barre verticale marque la complétion (complete). En modifiant le flux source au format valeur@temps, vous observez immédiatement le flux résultant. C'est la même logique que le TestScheduler de RxJS, mais visuel et sans installation.
Opérateurs de transformation : map, scan, mergeMap, switchMap
Les opérateurs de transformation modifient les valeurs ou les projettent vers de nouveaux flux. map applique une fonction à chaque valeur, scan accumule un état (comme reduce mais émet à chaque étape), tandis que mergeMap et switchMap projettent chaque valeur vers un flux interne.
import { fromEvent, switchMap, map, debounceTime, distinctUntilChanged } from 'rxjs';
import { ajax } from 'rxjs/ajax';
// Autocomplétion : annule la requête précédente à chaque frappe
const search$ = fromEvent<Event>(input, 'input').pipe(
map(e => (e.target as HTMLInputElement).value),
debounceTime(300), // attend 300ms de silence
distinctUntilChanged(), // ignore si la valeur n'a pas changé
switchMap(q => ajax.getJSON(`/api/search?q=${q}`)) // annule l'ancienne requête
);switchMap est le bon choix car il annule la requête précédente. Pour des actions indépendantes qui doivent toutes aboutir (ex: enregistrer plusieurs éléments), préférez mergeMap. Sélectionnez les deux dans l'outil ci-dessus pour comparer leurs marble diagrams.
Opérateurs de filtrage : filter, take, debounceTime, throttleTime
Le filtrage contrôle quelles valeurs passent et quand. filter applique un prédicat, take(n) ne garde que les N premières valeurs puis complète, debounceTime et throttleTime gèrent la cadence d'émission — essentiels pour limiter les appels lors d'événements rapides (scroll, resize, frappe clavier).
| Opérateur | Comportement | Cas d'usage typique |
|---|---|---|
debounceTime(d) |
Émet après d ms de silence |
Champ de recherche (autocomplétion) |
throttleTime(d) |
Émet la 1re valeur, ignore pendant d ms |
Scroll, clics répétés (anti-spam) |
distinctUntilChanged() |
Supprime les doublons consécutifs | Éviter les recalculs identiques |
take(n) |
N premières valeurs puis complète | Lecture unique, désabonnement auto |
Opérateurs utilitaires : tap, delay, startWith, endWith
tap exécute un effet de bord (log, debug) sans modifier le flux — idéal pour comprendre un pipe complexe. delay décale toutes les émissions, startWith injecte une valeur initiale (parfait pour un état de chargement), et endWith ajoute une valeur finale avant la complétion.
import { interval, startWith, tap, take, map } from 'rxjs';
const compteur$ = interval(1000).pipe(
startWith(-1), // affiche un état initial immédiat
map(n => n + 1),
take(5), // 0,1,2,3,4 puis complète
tap(n => console.log('Tick', n)) // debug sans altérer le flux
);RxJS dans Angular : les patterns à connaître
Dans un projet Angular, RxJS est omniprésent : HttpClient renvoie des Observables, les FormControl exposent valueChanges, et le Router publie ses événements en flux. Combiné au pipe async dans les templates, RxJS évite les fuites mémoire (désabonnement automatique) et le code impératif.
// composant Angular standalone
export class SearchComponent {
private http = inject(HttpClient);
private search = inject(FormControl);
results$ = this.search.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.http.get<Result[]>(`/api?q=${q}`)),
startWith([]) // liste vide au départ
);
// Template : <li *ngFor="let r of results$ | async">...
}async dans le template plutôt qu'un subscribe() manuel. Angular se charge alors du désabonnement quand le composant est détruit, supprimant une source classique de fuites mémoire.
Erreurs fréquentes avec les opérateurs RxJS
- Utiliser
mergeMappour de l'autocomplétion → requêtes obsolètes affichées. UtilisezswitchMap. - Oublier
debounceTimesur un champ de saisie → une requête par caractère tapé. - S'abonner manuellement sans se désabonner → fuite mémoire. Préférez
asyncoutakeUntilDestroyed(). - Confondre
concatMap(séquentiel),mergeMap(parallèle) etexhaustMap(ignore tant qu'occupé). - Placer les opérateurs dans le mauvais ordre dans le
pipe()— l'ordre change tout.
FAQ — Opérateurs RxJS
debounceTime(d) attend un silence de d ms avant d'émettre la dernière valeur — idéal pour un champ de recherche. throttleTime(d) émet immédiatement la première valeur puis ignore les suivantes pendant d ms — idéal pour limiter des événements de scroll ou de clic. Sélectionnez chacun dans l'outil pour comparer leur marble diagram.
switchMap annule le flux interne précédent (autocomplétion). mergeMap exécute tous les flux en parallèle (uploads indépendants). concatMap les enchaîne séquentiellement (ordre garanti). exhaustMap ignore les nouvelles valeurs tant que le flux courant n'est pas terminé (anti double-clic sur un bouton de connexion).
TestScheduler.
toSignal() et toObservable() font le pont entre les deux mondes.
async dans le template (désabonnement automatique), l'opérateur takeUntilDestroyed() (Angular 16+) ou des opérateurs qui complètent comme take, first, takeUntil. Évitez les subscribe() manuels sans gestion du cycle de vie.
Conclusion
Maîtriser RxJS, c'est d'abord comprendre visuellement le comportement de ses opérateurs dans le temps. Ce testeur interactif vous permet d'expérimenter map, filter, debounceTime, switchMap et bien d'autres sans configurer un projet : modifiez le flux source, observez le résultat, copiez le code. C'est l'outil idéal pour préparer un entretien Angular, déboguer un pipe récalcitrant ou simplement consolider vos bases en programmation réactive.
Pour aller plus loin, consultez la documentation officielle des opérateurs RxJS et explorez nos autres outils Angular pour générer guards, services et composants en quelques clics.
