Parameterized pipes in Angular - Mini Project: Build & Apply

Using Parameterized Pipes in Angular

📖 Scenario: You are building a simple Angular app that shows a list of product prices. You want to format these prices nicely using a custom pipe that can take a parameter to decide the currency symbol.

🎯 Goal: Create a custom Angular pipe called currencySymbol that formats a number with a currency symbol passed as a parameter. Then use this pipe in a component template to display product prices with different currency symbols.

📋 What You'll Learn

Create a custom pipe named currencySymbol that takes a number and a currency symbol string parameter

The pipe should return a string combining the currency symbol and the number with two decimals

Create a component with a list of product prices as numbers

Use the currencySymbol pipe in the component template with different currency symbols as parameters

💡 Why This Matters

🌍 Real World

Custom pipes with parameters are useful for formatting data dynamically in Angular apps, such as currencies, dates, or text transformations.

💼 Career

Understanding parameterized pipes helps you build reusable and flexible UI components, a common requirement in professional Angular development.

1

Set up product prices array

In the component TypeScript file, create a variable called prices and assign it the array [10, 20.5, 30, 40.99].

Angular

# Your code here
// Create the prices array

Need a hint?

Use a simple array of numbers assigned to prices.

2

Create currency symbol parameter

Create a variable called currency and set it to the string '$' in the component TypeScript file.

Angular

prices = [10, 20.5, 30, 40.99];
// Create the currency variable
# Your code here

Need a hint?

This variable will hold the currency symbol to pass to the pipe.

3

Implement the currencySymbol pipe

Create a custom pipe named currencySymbol that implements PipeTransform. It should have a transform method that takes a value: number and a symbol: string parameter. Return a string combining the symbol and the value formatted with two decimals using value.toFixed(2).

Angular

prices = [10, 20.5, 30, 40.99];
currency = '$';
// Create the currencySymbol pipe class
# Your code here

Need a hint?

Use template strings to combine the symbol and formatted number.

4

Use the pipe in the component template

In the component template HTML, use an *ngFor to loop over prices. Display each price using the currencySymbol pipe with the currency variable as the parameter. For example: {{ price | currencySymbol:currency }}.

Angular

prices = [10, 20.5, 30, 40.99];
currency = '$';

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'currencySymbol'
})
export class CurrencySymbolPipe implements PipeTransform {
  transform(value: number, symbol: string): string {
    return `${symbol}${value.toFixed(2)}`;
  }
}



  

Need a hint?

Use Angular's *ngFor directive and pipe syntax with parameter.