pipe method for chaining operators in Angular - Mini Project: Build & Apply

Using the pipe method for chaining operators in Angular

📖 Scenario: You are building a simple Angular component that processes a list of numbers. You want to filter out numbers less than 10 and then double the remaining numbers using RxJS operators.

🎯 Goal: Create an Angular component that uses the pipe method to chain filter and map operators on an observable of numbers. Display the processed numbers in the template.

📋 What You'll Learn

Create an observable of numbers from 5 to 15

Create a filter threshold variable with value 10

Use the pipe method to chain filter and map operators

Display the resulting numbers in the component template

💡 Why This Matters

🌍 Real World

Filtering and transforming data streams is common in Angular apps, such as processing user input, API data, or events.

💼 Career

Understanding how to chain RxJS operators with <code>pipe</code> is essential for Angular developers to write clean, reactive code.

1

Create an observable of numbers

Create an observable called numbers$ using of from RxJS with the numbers 5, 8, 10, 12, and 15.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-number-list',
  template: `{{ num }}`
})
export class NumberListComponent {
  // Create numbers$ observable with 5, 8, 10, 12, 15
  // Your code here
}

Need a hint?

Use of(5, 8, 10, 12, 15) to create the observable and assign it to numbers$.

2

Add a filter threshold variable

Add a number variable called filterThreshold and set it to 10 inside the component class.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-number-list',
  template: `{{ num }}`
})
export class NumberListComponent {
  numbers$ = of(5, 8, 10, 12, 15);
  processedNumbers: number[] = [];
  // Add filterThreshold variable with value 10
  // Your code here
}

Need a hint?

Declare filterThreshold as a number and assign it the value 10.

3

Use pipe to filter and map numbers

Use the pipe method on numbers$ to chain the filter operator that keeps numbers greater than or equal to filterThreshold, and the map operator that doubles each number. Subscribe to the result and assign the output array to processedNumbers.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';
import { filter, map, toArray } from 'rxjs/operators';

@Component({
  selector: 'app-number-list',
  template: `{{ num }}`
})
export class NumberListComponent {
  numbers$ = of(5, 8, 10, 12, 15);
  processedNumbers: number[] = [];
  filterThreshold = 10;
  // Use pipe with filter and map, then subscribe
  // Your code here
}

Need a hint?

Use pipe with filter, map, and toArray operators, then subscribe to assign the result to processedNumbers.

4

Complete the component template

Ensure the component template uses *ngFor to display each number in processedNumbers inside an unordered list <ul> with list items <li>.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';
import { filter, map, toArray } from 'rxjs/operators';

@Component({
  selector: 'app-number-list',
  template: ``
})
export class NumberListComponent {
  numbers$ = of(5, 8, 10, 12, 15);
  processedNumbers: number[] = [];
  filterThreshold = 10;

  constructor() {
    this.numbers$.pipe(
      filter(num => num >= this.filterThreshold),
      map(num => num * 2),
      toArray()
    ).subscribe(result => this.processedNumbers = result);
  }
  // Your code here
}

Need a hint?

Use *ngFor="let num of processedNumbers" inside <li> tags within a <ul>.