pipe method for chaining operators in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular component using pipe chaining?

Consider this Angular component using RxJS pipe to chain operators. What will be logged to the console?

Angular

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

@Component({
  selector: 'app-test',
  template: `<p>Check console output</p>`
})
export class TestComponent {
  constructor() {
    of(1, 2, 3, 4, 5).pipe(
      filter(x => x % 2 === 0),
      map(x => x * 10)
    ).subscribe(x => console.log(x));
  }
}

A 20, 40

B 2, 4

C 10, 20, 30, 40, 50

D 1, 3, 5

💡 Hint

Remember filter removes items not matching the condition before map transforms them.

The filter operator passes only even numbers (2, 4). Then map multiplies each by 10, resulting in 20 and 40.

📝 Syntax

intermediate

Which option correctly chains operators using pipe in Angular?

Which of the following code snippets correctly uses the pipe method to chain map and filter operators?

A of(1,2,3).pipe(map(x => x * 2), filter(x => x > 3))

B of(1,2,3).pipe(map(x => x * 2) filter(x => x > 3))

C of(1,2,3).pipe(map(x => x * 2).filter(x => x > 3))

D of(1,2,3).pipe(map(x => x * 2), filter x => x > 3)

💡 Hint

Look for correct syntax with commas and parentheses.

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

🔧 Debug

advanced

Why does this Angular pipe chain cause a runtime error?

Given this code snippet, why does it cause a runtime error?

Angular

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

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

A Because pipe method requires only one operator at a time

B Because filter operator is used after map, which is not allowed

C Because numbers do not have a toUpperCase method, causing a TypeError

D Because subscribe is missing a callback function

💡 Hint

Check the data type before calling toUpperCase.

The map operator transforms numbers, but toUpperCase is a string method. Calling it on a number causes a TypeError.

❓ state_output

advanced

What is the final emitted value after this pipe chain?

What value will be emitted by this observable chain?

Angular

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

of(1, 2, 3, 4).pipe(
  scan((acc, val) => acc + val, 0),
  filter(sum => sum > 5)
).subscribe(x => console.log(x));

A No output

B 6, 10

C 10

D 1, 3, 6, 10

💡 Hint

Think about how scan accumulates values and when filter passes them.

scan sums values cumulatively: 1, 3, 6, 10. filter passes only sums greater than 5, so 6 and 10 are emitted.

🧠 Conceptual

expert

Why is chaining operators with pipe preferred over nested subscriptions in Angular?

Which reason best explains why using pipe to chain RxJS operators is better than nesting subscriptions?

A Because nested subscriptions do not support error handling

B Because nested subscriptions run synchronously and block the UI thread

C Because pipe method automatically unsubscribes from observables

D Because pipe chaining keeps code readable and manages asynchronous flows without callback hell

💡 Hint

Think about code clarity and managing multiple async steps.

Chaining operators with pipe creates a clear, linear flow of data transformations and avoids deeply nested callbacks, improving readability and maintainability.