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
}

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

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

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

Need a hint?

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