Why operators transform data streams in Angular - See It in Action

Why operators transform data streams

📖 Scenario: You are building a simple Angular component that shows a list of numbers. You want to transform this list by doubling each number before showing it. This helps understand how operators change data streams in Angular.

🎯 Goal: Create an Angular standalone component that uses a signal with a list of numbers. Then use the map operator to transform the numbers by doubling them. Finally, display the transformed numbers in the template.

📋 What You'll Learn

Create a signal called numbers with the values [1, 2, 3, 4, 5]

Create a signal called doubledNumbers that transforms numbers by doubling each number using map

Display the doubledNumbers in the template using @for

Use Angular 17+ standalone component with signals and @for control flow

💡 Why This Matters

🌍 Real World

Transforming data streams is common in Angular apps to prepare data for display or further processing, such as filtering, sorting, or mapping values.

💼 Career

Understanding how to use signals and operators to transform data streams is essential for building reactive and efficient Angular applications.

1

Set up the numbers signal

Create a standalone Angular component called NumberListComponent. Inside it, create a signal called numbers with the array [1, 2, 3, 4, 5].

Angular

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

@Component({
  selector: 'app-number-list',
  standalone: true,
  template: ``,
})
export class NumberListComponent {
  // Create a signal called numbers with [1, 2, 3, 4, 5]
  // Your code here
}

Hint

Use signal from Angular to create a reactive data source with the exact array [1, 2, 3, 4, 5].

2

Create a doubledNumbers signal using map operator

Add a new signal called doubledNumbers that transforms the numbers signal by doubling each number. Use the map operator from Angular signals.

Angular

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

@Component({
  selector: 'app-number-list',
  standalone: true,
  template: ``,
})
export class NumberListComponent {
  numbers = signal([1, 2, 3, 4, 5]);
  // Create doubledNumbers signal that doubles each number in numbers
  // Your code here
}

Hint

Use computed to create a derived signal that applies map on numbers() to double each value.

3

Display doubledNumbers in the template

Update the component template to display each number from doubledNumbers using the Angular @for control flow directive.

Angular

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

@Component({
  selector: 'app-number-list',
  standalone: true,
  template: `
    
    
  `,
})
export class NumberListComponent {
  numbers = signal([1, 2, 3, 4, 5]);
  doubledNumbers = computed(() => this.numbers().map(n => n * 2));
}

Hint

Use @for (let num of doubledNumbers(); track num) { <li>{{ num }}</li> } inside a <ul> to list each doubled number. The track num is required.

4

Add accessibility and finalize component

Add an aria-label attribute with the value "Doubled numbers list" to the <ul> element for accessibility. Confirm the component is standalone and ready.

Angular

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

@Component({
  selector: 'app-number-list',
  standalone: true,
  template: `
    
      
      @for (let num of doubledNumbers(); track num) {
        {{ num }}
      }
    
  `,
})
export class NumberListComponent {
  numbers = signal([1, 2, 3, 4, 5]);
  doubledNumbers = computed(() => this.numbers().map(n => n * 2));
}

Hint

Add aria-label="Doubled numbers list" to the <ul> for screen readers.

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