filter operator for selection in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to filter the list to only include items with status 'active'.

Angular

const activeItems = items.[1](item => item.status === 'active');

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

Afilter

Bmap

Creduce

DforEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of filter, which transforms items but doesn't select.

Using forEach, which doesn't return a new filtered array.

The filter operator selects items that meet a condition. Here, it keeps only items with status 'active'.

2fill in blank

medium

Complete the Angular template code to display only users whose age is greater than 18 using the filter pipe.

Angular

<div *ngFor="let user of users | [1]: user => user.age > 18">{{user.name}}</div>

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

Afilter

Basync

Cmap

Dslice

Attempts:

3 left

💡 Hint

Common Mistakes

Using map pipe which transforms but does not filter.

Using async pipe which handles observables, not filtering.

The filter pipe selects array elements that satisfy the condition. Here, it shows users older than 18.

3fill in blank

hard

Fix the error in the RxJS observable pipeline to filter values greater than 10.

Angular

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

of(5, 15, 8, 20).pipe(
  [1](value => value > 10)
).subscribe(console.log);

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

Amap

Btap

Cfilter

Dreduce

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of filter, which changes values instead of filtering.

Using tap which does not filter values.

The filter operator in RxJS selects emitted values that pass the test. Here, it keeps values greater than 10.

4fill in blank

hard

Fill both blanks to create a filtered list of products with price less than 100 and map to their names.

Angular

const cheapProductNames = products.[1](p => p.price < 100).[2](p => p.name);

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

Afilter

Bmap

Creduce

DforEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using reduce instead of map for extracting names.

Using forEach which does not return a new array.

First, filter selects products cheaper than 100. Then, map extracts their names.

5fill in blank

hard

Fill all three blanks to create objects mapping user names to ages for users older than 21.

Angular

const userAges = users
  .[1](user => user.age > 21)
  .[2](user => ({[[3]]: user.age}));

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

Afilter

Bmap

Cuser.name

Dreduce

Attempts:

3 left

💡 Hint

Common Mistakes

Using reduce instead of map for transformation.

Using age instead of name as the key.

First, filter selects users older than 21. Then, map creates objects with user names as keys and ages as values.