tap operator for side effects in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the tap operator from RxJS.

Angular

import { [1] } from 'rxjs/operators';

Drag options to blanks, or click blank then click option'

Atap

BswitchMap

Cfilter

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Importing map instead of tap

Forgetting to import tap

Importing from wrong RxJS path

The tap operator is imported from rxjs/operators to perform side effects without altering the stream.

2fill in blank

medium

Complete the code to add a tap operator that logs the emitted value.

Angular

observable.pipe([1](value => console.log(value)))

Drag options to blanks, or click blank then click option'

Amap

BcatchError

Cfilter

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using map which changes the data

Using filter which filters emissions

Using catchError which handles errors

The tap operator is used here to log each emitted value for side effects.

3fill in blank

hard

Fix the error in the tap usage to correctly perform a side effect.

Angular

observable.pipe(tap([1]))

Drag options to blanks, or click blank then click option'

Aconsole.log(value)

Bvalue => console.log(value)

C() => console.log

Dconsole.log()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing console.log() which calls the function immediately

Passing console.log without wrapping in a function

Passing a non-function value

The tap operator expects a function. Passing value => console.log(value) correctly logs each value.

4fill in blank

hard

Fill both blanks to create a tap operator that logs 'Start' before and 'End' after the observable emits.

Angular

observable.pipe(tap([1], [2]))

Drag options to blanks, or click blank then click option'

A() => console.log('Start')

B() => console.log('End')

C() => alert('End')

D() => console.error('Error')

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert instead of console.log

Swapping the order of functions

Using console.error instead of console.log

The first function runs on each emission (logging 'Start'), the second runs on completion (logging 'End').

5fill in blank

hard

Fill all three blanks to create a tap operator that logs the value, errors, and completion messages.

Angular

observable.pipe(tap([1], [2], [3]))

Drag options to blanks, or click blank then click option'

Avalue => console.log('Value:', value)

Berror => console.error('Error:', error)

C() => console.log('Completed')

D() => alert('Done')

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert instead of console methods

Missing the error handler function

Passing non-functions as arguments

The tap operator can take three functions: for next values, errors, and completion respectively.