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
}

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
}

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
}

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
}

Hint

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

Practice

1. What is the main purpose of the pipe method in Angular when working with Observables?

easy

A. To create a new Observable from scratch

B. To subscribe to the Observable and start data flow

C. To chain multiple operators for transforming data streams

D. To convert an Observable into a Promise

Solution

1. Step 1: Understand the role of pipe

   The pipe method is used to chain operators that transform or filter data in an Observable stream.

2. Step 2: Differentiate from subscription

   Subscribing starts the data flow, but pipe only sets up the chain of operations.

3. Final Answer:

   To chain multiple operators for transforming data streams -> Option C

4. Quick Check:

   pipe chains operators = C [OK]

Hint: Remember: pipe chains, subscribe starts flow [OK]

Common Mistakes:

• Confusing pipe with subscribe
• Thinking pipe creates Observables
• Assuming pipe converts to Promise

2. Which of the following is the correct syntax to chain two operators map and filter using the pipe method on an Observable named obs$?

easy

A. obs$.pipe(map(x => x * 2), filter(x => x > 5))

B. obs$.pipe(map(x => x * 2).filter(x => x > 5))

C. obs$.map(x => x * 2).pipe(filter(x => x > 5))

D. obs$.filter(x => x > 5).pipe(map(x => x * 2))

Solution

1. Step 1: Recall correct pipe syntax

   The pipe method takes operators as arguments separated by commas inside parentheses.

2. Step 2: Check chaining order and method calls

   Only pipe is called once with both operators inside; chaining operators outside pipe is incorrect.

3. Final Answer:

   obs$.pipe(map(x => x * 2), filter(x => x > 5)) -> Option A

4. Quick Check:

   pipe(args separated by commas) = D [OK]

Hint: Use one pipe with comma-separated operators [OK]

Common Mistakes:

• Calling pipe multiple times incorrectly
• Chaining operators outside pipe
• Using dot notation on operators

3. Given the following code, what will be the output logged to the console?

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

const obs$ = of(1, 2, 3, 4, 5);
obs$.pipe(
  filter(x => x % 2 === 1),
  map(x => x * 10)
).subscribe(console.log);

medium

A. 1, 3, 5

B. 10, 30, 50

C. 2, 4

D. 20, 40

Solution

1. Step 1: Apply filter operator

   The filter keeps only odd numbers: 1, 3, 5.

2. Step 2: Apply map operator

   Each filtered value is multiplied by 10: 10, 30, 50.

3. Final Answer:

   10, 30, 50 -> Option B

4. Quick Check:

   filter odds then multiply by 10 = A [OK]

Hint: Filter first, then map inside pipe [OK]

Common Mistakes:

• Mixing order of operators
• Forgetting to subscribe
• Assuming filter keeps even numbers

4. Identify the error in the following code snippet that uses the pipe method:

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

const obs$ = of(1, 2, 3);
obs$.pipe(
  map(x => x * 2),
  filter(x => x > 3)
).subscribe(console.log());

medium

A. Calling subscribe with parentheses executes immediately

B. Incorrect import of operators

C. Missing semicolon after pipe method

D. Using arrow functions inside pipe is invalid

Solution

1. Step 1: Check subscribe usage

   The code calls subscribe(console.log()) which immediately executes console.log and passes its result (undefined) to subscribe.

2. Step 2: Correct subscribe usage

   It should be subscribe(console.log) without parentheses to pass the function reference.

3. Final Answer:

   Calling subscribe with parentheses executes immediately -> Option A

4. Quick Check:

   subscribe needs function reference, not call = A [OK]

Hint: Pass function to subscribe, don't call it [OK]

Common Mistakes:

• Calling subscribe with parentheses
• Confusing operator imports
• Thinking semicolon affects pipe chaining

5. You want to create an Observable pipeline that takes numbers, filters out falsy values (like 0), doubles the remaining numbers, and then converts them to strings with a prefix 'Value: '. Which of the following pipe chains correctly achieves this?

hard

A. obs$.pipe(map(x => `Value: ${x * 2}`), filter(x => !!x))

B. obs$.pipe(map(x => x * 2), filter(x => x), map(x => `Value: ${x}`))

C. obs$.pipe(filter(x => x !== 0), map(x => x * 2), map(x => `Value: ${x}`))

D. obs$.pipe(filter(x => !!x), map(x => `Value: ${x * 2}`))

Solution

1. Step 1: Filter out falsy values

   Using filter(x => !!x) removes falsy values like 0, null, undefined.

2. Step 2: Map to doubled string with prefix

   The map operator transforms the number by doubling and adding the prefix string.

3. Final Answer:

   obs$.pipe(filter(x => !!x), map(x => `Value: ${x * 2}`)) -> Option D

4. Quick Check:

   Filter falsy then map to string = B [OK]

Hint: Filter falsy first, then map to string [OK]

Common Mistakes:

• Mapping before filtering falsy values
• Using multiple maps unnecessarily
• Filtering after mapping to string