RxJS & Reactive Programming
Angular RxJS Operators map filter tap
Operators transform a stream inside a pipe() call. map changes each value, filter drops values that fail a test, and tap runs a side effect without changing anything passing through.
What is RxJS Operators map filter tap in Angular?
Operators transform a stream inside a pipe() call. map changes each value, filter drops values that fail a test, and tap runs a side effect without changing anything passing through.
RxJS Operators map filter tap example
TypeScript
this.api.getJobs().pipe(
tap(() => this.loading = true),
map(jobs => jobs.filter(j => j.stipend > 10000)),
map(jobs => jobs.sort((a, b) => b.stipend - a.stipend)),
tap(() => this.loading = false)
).subscribe(jobs => (this.jobs = jobs));Key points to remember
- Operators are pure — they return a new Observable rather than mutating one.
- tap is for logging and side effects; never transform values inside it.
- Import operators from "rxjs", not from "rxjs/operators", in current versions.
Operators you will use constantly
| Operator | Does |
|---|---|
| map | transform each emitted value |
| filter | only pass values matching a predicate |
| tap | run a side effect, leave the value unchanged |
| take(n) | take the first n values, then complete |
| debounceTime(ms) | wait for a quiet period before emitting |
| distinctUntilChanged | ignore consecutive duplicate values |
| catchError | handle an error and optionally substitute a value |
| finalize | run cleanup on complete or error |
Common mistakes with RxJS Operators map filter tap
- Putting business logic in tap where map belongs.
- Forgetting that operators do nothing until something subscribes.
Angular RxJS Operators map filter tap— Interview Questions & FAQs
What is the difference between map and tap?+
map transforms the value and passes the new one downstream. tap looks at the value, performs a side effect such as logging, and passes the original value through unchanged.