tap operator for side effects in Angular - Step-by-Step Execution

Concept Flow - tap operator for side effects

Observable emits value

↓

tap operator intercepts value

↓

Execute side effect (e.g., log)

↓

Pass original value unchanged

↓

Subscriber receives value

The tap operator lets you run code (side effects) when an Observable emits, without changing the emitted value.

Execution Sample

Angular

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

of(1, 2, 3).pipe(
  tap(x => console.log('Side effect:', x))
).subscribe(x => console.log('Received:', x));

This code logs each emitted value as a side effect, then the subscriber receives the same values.

Execution Table

Step	Observable emits	tap side effect	Value passed on	Subscriber output
1	1	console.log('Side effect: 1')	1	console.log('Received: 1')
2	2	console.log('Side effect: 2')	2	console.log('Received: 2')
3	3	console.log('Side effect: 3')	3	console.log('Received: 3')
4	Complete	No side effect	No value	Subscription ends

💡 Observable completes after emitting all values; tap runs side effects without altering values.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
emittedValue	none	1	2	3	complete
sideEffectLog	empty	'Side effect: 1'	'Side effect: 2'	'Side effect: 3'	done
subscriberReceived	none	1	2	3	complete

Key Moments - 2 Insights

Why doesn't tap change the values received by the subscriber?

Because tap only runs side effects and passes the original value unchanged, as shown in execution_table rows 1-3 where the value passed on equals the emitted value.

What happens if the tap callback throws an error?

An error in tap will propagate and stop the Observable chain, but normally tap is used for safe side effects like logging, as shown in the example where no errors occur.

Visual Quiz - 3 Questions

Look at the execution table, what value does the subscriber receive at step 2?

A 1

B 2

C Side effect: 2

D No value

💡 Hint

Check the 'Subscriber output' column at step 2 in the execution_table.

At which step does the Observable complete?

A Step 4

B Step 3

C Step 2

D Never completes

💡 Hint

Look at the 'Observable emits' column and the exit_note in the execution_table.

If the tap operator was removed, what would change in the subscriber output?

A Subscriber would receive different values

B Subscriber would receive no values

C Subscriber would receive the same values without side effect logs

D Observable would not complete

💡 Hint

Refer to variable_tracker and understand tap only adds side effects without changing values.

Concept Snapshot

tap operator runs side effects on Observable emissions
It does NOT change the emitted values
Useful for logging, debugging, or other side effects
Values pass through unchanged to subscribers
Errors in tap propagate and stop the stream
Commonly used inside pipe() in Angular RxJS

Full Transcript

The tap operator in Angular RxJS lets you perform side effects like logging when an Observable emits values. It intercepts each emitted value, runs your side effect code, and then passes the original value unchanged to the subscriber. This means the subscriber receives exactly what the Observable emits. The example code shows an Observable emitting 1, 2, and 3. The tap operator logs each value as a side effect, then the subscriber logs the received value. The execution table traces each step: the Observable emits a value, tap logs it, then the subscriber receives it. When the Observable completes, the subscription ends. This helps beginners see that tap is for side effects only and does not alter the data flow.