Creating custom pipes in Angular - Try It Yourself

Creating Custom Pipes in Angular

📖 Scenario: You are building a simple Angular app that displays a list of product prices. You want to show these prices formatted as currency with a dollar sign and two decimals.

🎯 Goal: Create a custom Angular pipe called currencyFormat that formats numbers as US dollars with two decimal places. Use this pipe in the template to display the formatted prices.

📋 What You'll Learn

Create an array called prices with the exact numbers: 10, 23.5, 99.99, 5

Create a string variable called currencySymbol with the value '$'

Create a custom pipe class called CurrencyFormatPipe that implements PipeTransform

Use the currencyFormat pipe in the template to display each price with the currency symbol and two decimals

💡 Why This Matters

🌍 Real World

Custom pipes help format data like prices, dates, or text consistently across an Angular app.

💼 Career

Knowing how to create and use custom pipes is a common skill for Angular developers to improve UI data presentation.

1

Set up the prices array

Create an array called prices with these exact numbers: 10, 23.5, 99.99, and 5.

Angular

# Create the prices array with the given numbers
# Your code here

Need a hint?

Use square brackets [] to create the array and separate numbers with commas.

2

Add the currency symbol variable

Create a string variable called currencySymbol and set it to '$'.

Angular

prices = [10, 23.5, 99.99, 5]
# Create the currencySymbol variable with '$'
# Your code here

Need a hint?

Use single quotes around the dollar sign to make it a string.

3

Create the custom pipe class

Create a custom pipe class called CurrencyFormatPipe that implements PipeTransform. Inside, write a transform method that takes a number and returns a string with the currencySymbol followed by the number formatted with two decimals (use toFixed(2)).

Angular

prices = [10, 23.5, 99.99, 5]
currencySymbol = '$'

# Create the CurrencyFormatPipe class implementing PipeTransform
# Your code here

Need a hint?

Use the @Pipe decorator with name: 'currencyFormat'. The transform method formats the number.

4

Use the custom pipe in the template

In the Angular template, use *ngFor="let price of prices" to loop over prices. Inside the loop, display each price using the currencyFormat pipe like this: {{ price | currencyFormat }}.

Angular

  
  
  # Your code here

Need a hint?

Use *ngFor on an <li> element inside a <ul>. Use interpolation with the pipe.