tap operator for side effects in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does the tap operator do in this Angular RxJS code?

Consider this Angular service method using RxJS:

getData() {
  return this.http.get('/api/data').pipe(
    tap(data => console.log('Data received:', data))
  );
}

What is the main purpose of the tap operator here?

Angular

getData() {
  return this.http.get('/api/data').pipe(
    tap(data => console.log('Data received:', data))
  );
}

A It modifies the data before passing it to subscribers.

B It delays the data emission by a fixed time.

C It filters out unwanted data from the stream.

D It performs a side effect without changing the data stream.

💡 Hint

Think about whether tap changes the data or just observes it.

The tap operator is used to perform side effects like logging without modifying the data stream. It passes the original data unchanged to the next operator or subscriber.

❓ state_output

intermediate

What will be logged and emitted by this observable?

Given this Angular RxJS snippet:

of(1, 2, 3).pipe(
  tap(x => console.log('Side effect:', x)),
  map(x => x * 10)
).subscribe(result => console.log('Result:', result));

What will be the console output sequence?

Angular

of(1, 2, 3).pipe(
  tap(x => console.log('Side effect:', x)),
  map(x => x * 10)
).subscribe(result => console.log('Result:', result));

A

Side effect: 10
Side effect: 20
Side effect: 30
Result: 10
Result: 20
Result: 30

B

Side effect: 1
Result: 10
Side effect: 2
Result: 20
Side effect: 3
Result: 30

C

Result: 10
Result: 20
Result: 30

D

Side effect: 1
Result: 1
Side effect: 2
Result: 2
Side effect: 3
Result: 3

💡 Hint

Remember tap runs before map and does not change values.

The tap logs the original values 1, 2, 3. Then map multiplies each by 10 before emitting. So logs show side effects with original values, results with multiplied values.

📝 Syntax

advanced

Which option correctly uses tap to update a loading flag?

You want to set loading = true before an HTTP call and loading = false after it completes using tap. Which code snippet is correct?

Angular

loading = false;

fetchData() {
  this.loading = true;
  this.http.get('/api/items').pipe(
    tap({
      next: () => this.loading = false,
      error: () => this.loading = false
    })
  ).subscribe();
}

A tap({ next: () => this.loading = false, error: () => this.loading = false })

B tap(() => this.loading = false)

C tap(data => this.loading = true)

D tap({ complete: () => this.loading = true })

💡 Hint

Consider how to handle success and error to reset loading.

Option A uses the object form of tap to handle both next and error callbacks, ensuring loading is set to false in both cases.

🔧 Debug

advanced

Why does this tap usage cause a runtime error?

Examine this Angular RxJS code:

this.http.get('/api/data').pipe(
  tap(data => { this.processData(data); })
).subscribe();

Inside processData, this is undefined. Why?

Angular

this.http.get('/api/data').pipe(
  tap(data => { this.processData(data); })
).subscribe();

A Because the function passed to tap is not bound to the component instance.

B Because tap runs outside Angular zone causing this to be undefined.

C Because arrow functions do not bind their own this, so this is undefined.

D Because processData is not declared as an arrow function.

💡 Hint

Think about how this works inside callbacks.

The callback function passed to tap is a normal arrow function, but if the surrounding context is lost or the code is extracted, this may not refer to the component instance. Binding or using arrow functions carefully is needed.

🧠 Conceptual

expert

What is the key difference between tap and map in RxJS?

Choose the statement that best describes the difference between tap and map operators in RxJS.

A tap transforms the data stream, map performs side effects without changing data.

B tap delays emissions, map filters data based on a condition.

C tap performs side effects without changing data, map transforms the data stream.

D Both tap and map transform data but tap also logs it.

💡 Hint

One changes data, the other just observes it.

tap is used for side effects like logging and does not modify the data stream. map transforms each emitted value into a new value.