Common RxJS Pipe Operators with Simple Examples

 

1. map()

Transforms each value.

of(1, 2, 3).pipe(
  map(x => x * 10)
)
.subscribe(console.log);

Output:

10
20
30

Meaning:

• Takes each value
• Changes it
• Returns new value

---

2. filter()

Allows only matching values.

of(1, 2, 3, 4).pipe(
  filter(x => x % 2 === 0)
)
.subscribe(console.log);

Output:

2
4

Meaning:

• Keeps only even numbers

---

3. tap()

Used for logging/debugging.
Does NOT change data.

of(5).pipe(
  tap(x => console.log('Value:', x))
)
.subscribe();

Output:

Value: 5

Meaning:

• Just checks value
• Like console.log inside pipe

---

4. debounceTime()

Waits before emitting value.

Used in search box.

search.valueChanges.pipe(
  debounceTime(300)
)

Meaning:

• Wait 300ms after typing stops
• Prevents too many API calls

Without it:

a → API
ab → API
abc → API

With debounce:

User stops typing
↓
Only 1 API call

---

5. distinctUntilChanged()

Ignores duplicate consecutive values.

of(1,1,2,2,3).pipe(
  distinctUntilChanged()
)
.subscribe(console.log);

Output:

1
2
3

Meaning:

• Removes repeated values

---

6. switchMap()

Cancels previous API call and uses latest one.

Best for search APIs.

search.valueChanges.pipe(
  switchMap(value => this.api.search(value))
)
.subscribe();

Example:

a   → API call
ab  → cancel previous
abc → cancel previous

Only latest result is used.

---

7. mergeMap()

Runs all API calls together.

of(1,2,3).pipe(
  mergeMap(id => this.api.getUser(id))
)
.subscribe();

Meaning:

API 1
API 2
API 3
All run parallel

---

8. concatMap()

Runs one by one in order.

of(1,2,3).pipe(
  concatMap(id => this.api.getUser(id))
)
.subscribe();

Meaning:

Wait API 1 finish
↓
Start API 2
↓
Start API 3

---

9. exhaustMap()

Ignores new requests until current finishes.

Best for submit button.

clicks.pipe(
  exhaustMap(() => this.api.save())
)
.subscribe();

Meaning:

Click 1 → API starts
Click 2 → ignored
Click 3 → ignored

Prevents double submit.

---

10. catchError()

Handles errors.

this.http.get('/api').pipe(
  catchError(err => {
    console.log(err);
    return of([]);
  })
)
.subscribe();

Meaning:

• App won't crash
• Returns fallback value

---

11. take()

Takes only limited values.

of(1,2,3,4).pipe(
  take(2)
)
.subscribe(console.log);

Output:

1
2

---

12. takeUntil()

Auto unsubscribe.

Angular commonly uses:

this.api.getData().pipe(
  takeUntil(this.destroy$)
)
.subscribe();

Meaning:

• Stops observable when component destroyed

Angular 16+ better:

takeUntilDestroyed()

---

13. finalize()

Runs at end success/error/unsubscribe.

this.http.get('/api').pipe(
  finalize(() => {
    this.loading = false;
  })
)
.subscribe();

Meaning:

• Hide loader after API completes

---

14. shareReplay()

Caches latest value.

users$ = this.http.get('/api/users').pipe(
  shareReplay(1)
);

Meaning:

• API called once
• Reuses cached response

---

15. startWith()

Adds initial value.

of(2,3).pipe(
  startWith(1)
)
.subscribe(console.log);

Output:

1
2
3

---

16. delay()

Delays output.

of('Hello').pipe(
  delay(2000)
)
.subscribe(console.log);

Meaning:

• Emits after 2 seconds

---

17. forkJoin()

Waits all APIs finish.

forkJoin([
  this.api.users(),
  this.api.products()
]).subscribe(([users, products]) => {
  console.log(users, products);
});

Meaning:

Wait all complete
↓
Return final result together

---

18. combineLatest()

Combines latest values continuously.

combineLatest([
  this.name$,
  this.age$
]).subscribe(console.log);

Meaning:

Whenever any value changes,
latest values from both emitted

---

Simple Memory Trick

Operator	Purpose
map	change value
filter	remove unwanted
tap	console log
switchMap	latest only
mergeMap	parallel
concatMap	one by one
exhaustMap	ignore duplicates
catchError	handle error
debounceTime	wait
distinctUntilChanged	avoid duplicate
takeUntil	auto unsubscribe
finalize	cleanup
shareReplay	cache