map operator for transformation in Angular - Mini Project: Build & Apply

Using the map Operator for Transformation in Angular

📖 Scenario: You are building a simple Angular component that receives a list of product prices in dollars. You want to convert these prices to euros using a fixed conversion rate and display the converted prices.

🎯 Goal: Create an Angular standalone component that uses the RxJS map operator to transform a stream of prices in dollars to prices in euros and displays them in a list.

📋 What You'll Learn

Create an observable of prices in dollars

Define a conversion rate variable

Use the RxJS map operator to convert prices to euros

Display the converted prices in the template using *ngFor

💡 Why This Matters

🌍 Real World

Transforming data streams is common in Angular apps, such as converting currencies, formatting dates, or filtering lists before showing them to users.

💼 Career

Understanding how to use RxJS operators like map is essential for Angular developers to handle asynchronous data and create reactive user interfaces.

1

Create an observable of prices in dollars

Create a variable called prices$ that is an observable emitting the array [10, 20, 30] using of from rxjs.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-price-list',
  standalone: true,
  template: ``,
})
export class PriceListComponent {
  // Create prices$ observable emitting [10, 20, 30]
  // Your code here
}

Hint

Use prices$ = of([10, 20, 30]) to create the observable.

2

Add a conversion rate variable

Add a variable called conversionRate and set it to 0.85 to represent the dollar to euro conversion rate.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-price-list',
  standalone: true,
  template: ``,
})
export class PriceListComponent {
  prices$ = of([10, 20, 30]);
  // Add conversionRate variable here
  // Your code here
}

Hint

Define conversionRate = 0.85 inside the component class.

3

Use the map operator to convert prices to euros

Import map from rxjs/operators. Create a new observable called pricesInEuros$ by applying the map operator to prices$. Inside map, multiply each price by conversionRate to convert dollars to euros.

Angular

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

@Component({
  selector: 'app-price-list',
  standalone: true,
  template: ``,
})
export class PriceListComponent {
  prices$ = of([10, 20, 30]);
  conversionRate = 0.85;
  // Create pricesInEuros$ using map operator
  // Your code here
}

Hint

Use pricesInEuros$ = this.prices$.pipe(map(prices => prices.map(price => price * this.conversionRate))).

4

Display the converted prices in the template

Update the component template to use *ngFor and the async pipe to display each price from pricesInEuros$ inside a <li> element within a <ul>.

Angular

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

@Component({
  selector: 'app-price-list',
  standalone: true,
  template: `
    
    
  `,
})
export class PriceListComponent {
  prices$ = of([10, 20, 30]);
  conversionRate = 0.85;
  pricesInEuros$ = this.prices$.pipe(
    map(prices => prices.map(price => price * this.conversionRate))
  );
}

Hint

Use <li *ngFor="let price of pricesInEuros$ | async">{{ price | number:'1.2-2' }} €</li> inside a <ul>.

Practice

1. What does the map operator do in Angular's RxJS pipe()?

easy

A. Delays the emission of values by a set time

B. Filters out values that do not meet a condition

C. Combines multiple streams into one

D. Transforms each emitted value by applying a function to it

Solution

1. Step 1: Understand the purpose of map

   The map operator changes each value emitted by an observable by applying a function to it.

2. Step 2: Compare with other operators

   Unlike filter or combineLatest, map transforms values, not filters or combines streams.

3. Final Answer:

   Transforms each emitted value by applying a function to it -> Option D

4. Quick Check:

   map = transform values [OK]

Hint: Remember: map changes values, filter removes them [OK]

Common Mistakes:

• Confusing map with filter operator
• Thinking map combines streams
• Assuming map delays emissions

2. Which of the following is the correct syntax to use map inside an Angular RxJS pipe()?

easy

A. observable.pipe(map(value => value * 2))

B. observable.map(value => value * 2)

C. observable.pipe(map => value * 2)

D. observable.pipe(map(value, value * 2))

Solution

1. Step 1: Recall RxJS pipe syntax

   The map operator is used inside pipe() with a function: map(value => ...).

2. Step 2: Identify correct function usage

   observable.pipe(map(value => value * 2)) correctly uses map(value => value * 2) inside pipe(). Others misuse syntax or method chaining.

3. Final Answer:

   observable.pipe(map(value => value * 2)) -> Option A

4. Quick Check:

   Correct map syntax = observable.pipe(map(value => value * 2)) [OK]

Hint: Use pipe(map(fn)) not observable.map(fn) [OK]

Common Mistakes:

• Calling map directly on observable without pipe
• Incorrect arrow function syntax
• Passing multiple arguments to map incorrectly

3. Given this code, what will be logged?

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

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

medium

A. 1 2 3

B. 2 3 4

C. [2, 3, 4]

D. Error: map is not a function

Solution

1. Step 1: Understand the source observable

   of(1, 2, 3) emits values 1, then 2, then 3 sequentially.

2. Step 2: Apply the map transformation

   The map adds 1 to each value, so outputs are 2, 3, and 4.

3. Final Answer:

   2 3 4 -> Option B

4. Quick Check:

   Input + 1 = Output [OK]

Hint: map changes each value, so 1 becomes 2, etc. [OK]

Common Mistakes:

• Expecting original values without change
• Thinking output is an array instead of separate logs
• Confusing import syntax causing runtime error

4. Identify the error in this code snippet using map:

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

of(10, 20, 30).pipe(
  map(x => { x * 2; })
).subscribe(console.log);

medium

A. Missing return statement inside map function

B. Incorrect import of map operator

C. Using pipe instead of subscribe

D. of() cannot emit multiple values

Solution

1. Step 1: Analyze the map function body

   The function uses curly braces but does not return a value explicitly, so it returns undefined.

2. Step 2: Understand effect on output

   Because no value is returned, the output will be undefined for each emission, which is likely unintended.

3. Final Answer:

   Missing return statement inside map function -> Option A

4. Quick Check:

   Curly braces need explicit return [OK]

Hint: Use parentheses or return inside braces in map [OK]

Common Mistakes:

• Assuming implicit return with braces
• Importing map incorrectly
• Confusing pipe and subscribe usage

5. You have an observable emitting user objects:

of(
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 30},
  {name: 'Carol', age: 22}
).pipe(
  map(user => /* ??? */)
).subscribe(console.log);

Which map function will transform the stream to emit only the user names in uppercase?

hard

A. user => ({name: user.name})

B. user => user.age.toString()

C. user => user.name.toUpperCase()

D. user => user.name.toLowerCase()

Solution

1. Step 1: Identify desired output

   The goal is to emit only the user names converted to uppercase strings.

2. Step 2: Check each map option

   user => user.name.toUpperCase() converts user.name to uppercase, matching the goal. Others either convert age, return objects, or lowercase names.

3. Final Answer:

   user => user.name.toUpperCase() -> Option C

4. Quick Check:

   Uppercase names = user => user.name.toUpperCase() [OK]

Hint: Pick map that returns uppercase user.name string [OK]

Common Mistakes:

• Returning full user object instead of name
• Using toLowerCase instead of toUpperCase
• Converting age instead of name