javascript / expert
Snippet
Custom RxJS Pipeable Operators for Stream Debugging
Expert Angular development often involves complex RxJS streams. Instead of repeating tap() blocks, you can create higher-order functions that return a unary function (a Pipeable Operator). This promotes reusability and keeps component logic clean.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { Observable, tap } from 'rxjs';export function trace<T>(tag: string) {return (source: Observable<T>) => source.pipe(tap({next: (value) => console.log(`[✅ ${tag}]:`, value),error: (error) => console.error(`[❌ ${tag}]:`, error),complete: () => console.info(`[☑️ ${tag}]: Completed`)}));}
angular
Breakdown
1
return (source: Observable<T>) => source.pipe(...)
Returns a function that takes an Observable and returns a new one, adhering to the Pipeable Operator contract.
2
tap({ next, error, complete })
Uses the observer object syntax to handle all stream states in a single side-effect utility.