Why operators transform data streams in Angular - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular signal transformation?

Consider this Angular component using signals and operators. What will be the displayed value after the button is clicked twice?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ doubled() }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = this.count.map(x => x * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}

A Count: 0

B Count: 2

C Count: 1

D Count: 4

💡 Hint

Remember the operator doubles the count signal value each time it changes.

The count signal starts at 0. Each click increments it by 1. After two clicks, count is 2. The doubled signal maps count to count * 2, so 2 * 2 = 4.

📝 Syntax

intermediate

Which option correctly applies a map operator to an Angular signal?

Which code snippet correctly creates a new signal that doubles the original signal's value using the map operator?

A const doubled = originalSignal.map(x => x * 2);

B const doubled = map(originalSignal, x => x * 2);

C const doubled = originalSignal.pipe(map(x => x * 2));

D const doubled = originalSignal.transform(x => x * 2);

💡 Hint

Angular signals have a map method to create derived signals.

In Angular signals, map is a method on the signal instance that returns a new signal with transformed values. The other options use RxJS or invalid syntax.

🔧 Debug

advanced

Why does this Angular signal transformation cause a runtime error?

Given this code, why does it throw an error when the component renders?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-test',
  standalone: true,
  template: `{{ transformed() }}`
})
export class TestComponent {
  base = signal(5);
  transformed = this.base.map(x => {
    if (x > 3) throw new Error('Value too high');
    return x * 2;
  });
}

A Because signals cannot throw errors inside map functions

B Because the map operator runs synchronously and throws when x > 3

C Because the template syntax is invalid for signals

D Because the base signal is not initialized properly

💡 Hint

Think about when the map function executes and what happens if it throws.

The map function runs immediately when the signal value changes. If it throws an error, the component rendering fails with that error.

❓ state_output

advanced

What is the final value of the signal after these updates and transformations?

Given this Angular component code, what is the final value of result() after calling updateValues()?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-transform',
  standalone: true,
  template: `Result: {{ result() }}`
})
export class TransformComponent {
  base = signal(1);
  result = this.base.map(x => x + 3);

  updateValues() {
    this.base.set(2);
    this.base.update(x => x * 5);
  }
}

A Result: 13

B Result: 8

C Result: 6

D Result: 10

💡 Hint

Remember that update uses the current signal value after set.

After set(2), base is 2. Then update(x => x * 5) changes base to 10. The result signal maps base + 3, so 10 + 3 = 13.

🧠 Conceptual

expert

Why do operators like map transform data streams in Angular signals?

Which statement best explains why operators such as map are used to transform data streams in Angular signals?

A They modify the original signal's value directly to improve performance.

B They delay the signal updates until a manual refresh is triggered.

C They create new signals that automatically update when the original signal changes, enabling reactive data flow.

D They convert signals into promises to handle asynchronous data.

💡 Hint

Think about how reactive programming works with signals and derived values.

Operators like map create new signals derived from existing ones. These derived signals update automatically when the original changes, supporting reactive programming.

Practice

1. What is the main purpose of operators in Angular data streams?

easy

A. To stop the stream permanently

B. To create new streams from scratch

C. To transform or change the data inside the stream

D. To convert streams into plain objects

Solution

1. Step 1: Understand what operators do in streams

   Operators are functions that take data from a stream and change it in some way.

2. Step 2: Identify the main role of operators

   They transform the data to fit what the app needs, like filtering or mapping values.

3. Final Answer:

   To transform or change the data inside the stream -> Option C

4. Quick Check:

   Operators transform data = A [OK]

Hint: Operators change data inside streams, not create or stop them [OK]

Common Mistakes:

• Thinking operators create streams instead of transforming data
• Confusing operators with stream termination
• Believing operators convert streams to objects

2. Which is the correct way to combine operators in Angular?

easy

A. Using the merge() method

B. Using the combine() method

C. Using the concat() method

D. Using the pipe() method

Solution

1. Step 1: Recall how Angular chains operators

   Angular uses the pipe() method to chain multiple operators together on a stream.

2. Step 2: Confirm the correct method name

   The method pipe() is the standard way to combine operators like map and filter.

3. Final Answer:

   Using the pipe() method -> Option D

4. Quick Check:

   Combine operators with pipe() = C [OK]

Hint: Remember: pipe() chains operators in Angular streams [OK]

Common Mistakes:

• Confusing pipe() with combine() or merge()
• Using merge() or concat() which combine streams, not operators
• Trying to chain operators without pipe()

3. Given the code:

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

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

What will be printed to the console?

medium

A. 20, 40

B. 10, 20, 30, 40, 50

C. 2, 4

D. 1, 3, 5

Solution

1. Step 1: Apply the filter operator

   The filter keeps only even numbers: 2 and 4.

2. Step 2: Apply the map operator

   Each filtered number is multiplied by 10: 2*10=20, 4*10=40.

3. Final Answer:

   20, 40 -> Option A

4. Quick Check:

   Filter evens then multiply by 10 = B [OK]

Hint: Filter first, then map changes values; order matters [OK]

Common Mistakes:

• Ignoring filter and mapping all numbers
• Mapping before filtering (wrong order)
• Printing original numbers without transformation

4. What is wrong with this code snippet?

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

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

medium

A. The operators are in the wrong order; filter should come before map

B. There is no error; the code works as expected

C. The subscribe() method is not called correctly

D. The pipe() method is missing

Solution

1. Step 1: Check the order of operators

   Mapping first doubles the numbers: 2, 4, 6. Then filtering keeps values greater than 3: 4 and 6.

2. Step 2: Verify syntax and method calls

   pipe() and subscribe() are used correctly with proper syntax.

3. Final Answer:

   There is no error; the code works as expected -> Option B

4. Quick Check:

   Correct order and syntax = D [OK]

Hint: Mapping before filtering is valid; no syntax errors here [OK]

Common Mistakes:

• Assuming filter must always come before map
• Thinking pipe() is missing
• Believing subscribe() is incorrect

5. You want to create a stream that emits only the first 3 even numbers doubled from the list [1, 2, 3, 4, 5, 6, 7, 8]. Which operator sequence correctly achieves this?

hard

A. of(...list).pipe(filter(x => x % 2 === 0), take(3), map(x => x * 2))

B. of(...list).pipe(take(3), filter(x => x % 2 === 0), map(x => x * 2))

C. of(...list).pipe(map(x => x * 2), filter(x => x % 2 === 0), take(3))

D. of(...list).pipe(map(x => x * 2), take(3), filter(x => x % 2 === 0))

Solution

1. Step 1: Filter even numbers first

   Filtering first keeps only even numbers: 2, 4, 6, 8.

2. Step 2: Take the first 3 even numbers

   Using take(3) after filtering selects 2, 4, 6.

3. Step 3: Double the selected numbers

   Mapping last doubles each: 4, 8, 12.

4. Final Answer:

   of(...list).pipe(filter(x => x % 2 === 0), take(3), map(x => x * 2)) -> Option A

5. Quick Check:

   Filter -> take -> map order = A [OK]

Hint: Filter first, then take, then map to transform last [OK]

Common Mistakes:

• Taking first 3 items before filtering
• Mapping before filtering, changing filter logic
• Taking after mapping, causing wrong values