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

Need a 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

Need a 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

Need a 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

Need a hint?

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