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
}

Need a 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
}

Need a 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));
}

Need a 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));
}

Need a hint?

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