Why operators transform data streams in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the map operator from RxJS.

Angular

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

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

AmergeMap

Bfilter

Ctap

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong operator like filter or tap.

Forgetting to import from 'rxjs/operators'.

The map operator is used to transform data streams in Angular with RxJS.

2fill in blank

medium

Complete the code to transform the emitted values by doubling them.

Angular

source$.pipe([1](value => value * 2))

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

Amap

Bfilter

Ctap

Dscan

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter which only filters values.

Using tap which is for side effects, not transformation.

The map operator applies a function to each emitted value, transforming the stream.

3fill in blank

hard

Fix the error in the code by choosing the correct operator to transform the stream.

Angular

const doubled$ = source$.pipe([1](value => value * 2));

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

Amap

Bfilter

Csubscribe

Dpipe

Attempts:

3 left

💡 Hint

Common Mistakes

Using subscribe instead of map.

Trying to call pipe as an operator.

The map operator transforms each value. Using subscribe or pipe incorrectly here causes errors.

4fill in blank

hard

Fill both blanks to create a stream that filters even numbers and then doubles them.

Angular

source$.pipe([1](value => value % 2 === 0), [2](value => value * 2))

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

Afilter

Bmap

Ctap

Dscan

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of operators.

Using tap instead of map for transformation.

First, filter selects even numbers. Then, map doubles them.

5fill in blank

hard

Fill all three blanks to create a stream that filters odd numbers, doubles them, and logs each value.

Angular

source$.pipe([1](value => value % 2 !== 0), [2](value => value * 2), [3](value => console.log(value)))

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

Afilter

Bmap

Ctap

Dscan

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of tap for logging.

Filtering even numbers instead of odd.

filter selects odd numbers, map doubles them, and tap logs each value without changing the stream.