filter operator for selection in Angular - Mini Project: Build & Apply

Filter Operator for Selection in Angular

📖 Scenario: You are building a simple Angular standalone component that shows a list of fruits. You want to let users select a fruit from a dropdown, and then show only that fruit's details below.

🎯 Goal: Create an Angular standalone component that uses the filter operator from RxJS to select and display the chosen fruit from a list.

📋 What You'll Learn

Create a list of fruits as an array of objects with id and name

Create a signal to hold the selected fruit's id

Use the RxJS filter operator to find the fruit matching the selected id

Display the selected fruit's name in the template

💡 Why This Matters

🌍 Real World

Filtering data based on user selection is common in apps like shopping sites, dashboards, and forms.

💼 Career

Understanding how to filter streams of data reactively is important for building responsive Angular applications.

1

Create the fruits array

Create a constant array called fruits with these exact objects: { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, and { id: 3, name: 'Cherry' }.

Angular

# Your code here

Hint

Use const fruits = [ ... ] with the exact objects inside.

2

Create a signal for selected fruit id

Create a signal called selectedFruitId and initialize it with the number 2.

Angular

const fruits = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

// Create selectedFruitId signal with initial value 2
# Your code here

Hint

Use const selectedFruitId = signal(2); to create the signal.

3

Use filter operator to select the fruit

Create an observable called selectedFruit$ by converting selectedFruitId to an observable and using the RxJS filter operator to find the fruit in fruits whose id matches the emitted value.

Angular

import { signal } from '@angular/core';
import { filter, map } from 'rxjs/operators';
import { from } from 'rxjs';

const fruits = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

const selectedFruitId = signal(2);

// Create selectedFruit$ observable using filter operator
# Your code here

Hint

Use from(fruits).pipe(filter(...)) to filter the fruit matching selectedFruitId().

4

Display the selected fruit in the template

In the Angular component template, use the async pipe to display the selectedFruit$ observable's value inside a <p> tag with the text: Selected fruit: followed by the fruit name.

Angular

import { signal } from '@angular/core';
import { from } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const fruits = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

const selectedFruitId = signal(2);

const selectedFruit$ = from(fruits).pipe(
  filter(fruit => fruit.id === selectedFruitId()),
  map(fruit => fruit.name)
);

// Add template code below
# Your code here

Hint

Use {{ selectedFruit$ | async }} inside a <p> tag in the template.

Practice

1. What does the filter operator do in Angular's RxJS streams?

easy

A. It delays the stream values by a set time.

B. It selects only the values that meet a condition.

C. It combines multiple streams into one.

D. It transforms each value into a new value.

Solution

1. Step 1: Understand the purpose of filter

   The filter operator is used to pick values from a stream that satisfy a condition.

2. Step 2: Compare with other operators

   Unlike map (which transforms) or merge (which combines), filter only selects values.

3. Final Answer:

   It selects only the values that meet a condition. -> Option B

4. Quick Check:

   filter = select values by condition [OK]

Hint: Filter picks values that return true in its function [OK]

Common Mistakes:

• Confusing filter with map operator
• Thinking filter changes values instead of selecting
• Assuming filter combines streams

2. Which is the correct syntax to use the filter operator inside an RxJS pipe() in Angular?

easy

A. source$.pipe(filter(value => value > 10))

B. source$.filter(value => value > 10)

C. source$.pipe(map(value => value > 10))

D. source$.pipe(filter(value, value > 10))

Solution

1. Step 1: Recall RxJS pipe syntax

   Operators like filter are used inside pipe as functions: pipe(filter(...)).

2. Step 2: Check the filter function argument

   The filter function takes a callback returning true/false, e.g. value => value > 10.

3. Final Answer:

   source$.pipe(filter(value => value > 10)) -> Option A

4. Quick Check:

   filter inside pipe with callback arrow function [OK]

Hint: Use filter inside pipe with a function returning true/false [OK]

Common Mistakes:

• Calling filter directly on observable without pipe
• Using map instead of filter
• Passing multiple arguments incorrectly to filter

3. Given this code snippet, what will be the output values logged?

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

of(1, 5, 10, 15).pipe(
  filter(x => x > 5)
).subscribe(console.log);

medium

A. 5, 10, 15

B. 1, 5

C. 10, 15

D. 1, 5, 10, 15

Solution

1. Step 1: Identify the filter condition

   The filter condition is x > 5, so only values greater than 5 pass.

2. Step 2: Check which values pass

   From the values 1, 5, 10, 15, only 10 and 15 are greater than 5.

3. Final Answer:

   10, 15 -> Option C

4. Quick Check:

   Values > 5 = 10, 15 [OK]

Hint: Filter keeps values where condition is true [OK]

Common Mistakes:

• Including values equal to 5 (should be > 5)
• Confusing filter with map output
• Assuming all values pass filter

4. What is wrong with this Angular RxJS code using filter?

source$.pipe(
  filter(x => {
    if (x % 2 === 0) return true;
  })
).subscribe(console.log);

medium

A. The filter callback does not return false for odd numbers.

B. The filter operator is used outside pipe.

C. The subscribe method is missing.

D. The filter callback should return a number, not boolean.

Solution

1. Step 1: Analyze the filter callback function

   The callback returns true for even numbers but returns undefined (no return) for odd numbers.

2. Step 2: Understand filter expects boolean return

   Filter needs true or false; undefined is treated as false but is unclear and error-prone.

3. Final Answer:

   The filter callback does not return false for odd numbers. -> Option A

4. Quick Check:

   Filter callback must return true or false explicitly [OK]

Hint: Always return true or false in filter callback [OK]

Common Mistakes:

• Missing explicit false return in filter
• Using filter outside pipe
• Confusing filter callback return types

5. You want to filter a stream of user objects to only those who are active and have age over 18. Which filter function correctly applies both conditions inside pipe()?

users$.pipe(
  filter( /* your code here */ )
).subscribe(activeAdults => console.log(activeAdults));

hard

A. user => user.isActive && user.age >= 18

B. user => user.isActive || user.age > 18

C. user => user.isActive && user.age > 18 && user.name

D. user => user.isActive && user.age > 18

Solution

1. Step 1: Understand the conditions

   We want users who are active AND older than 18 (strictly greater).

2. Step 2: Check each option's logic

   user => user.isActive && user.age > 18 uses && with user.isActive and user.age > 18, matching requirements exactly.

3. Final Answer:

   user => user.isActive && user.age > 18 -> Option D

4. Quick Check:

   Both conditions true with AND operator [OK]

Hint: Use && to combine multiple filter conditions [OK]

Common Mistakes:

• Using || instead of && to combine conditions
• Using >= instead of > if strict condition needed
• Adding unrelated conditions like user.name