Why pipes are needed in Angular - See It in Action

Why pipes are needed

📖 Scenario: You are building a simple Angular app that shows a list of product prices. The prices come as numbers, but you want to display them nicely formatted as currency with a dollar sign and two decimals.

🎯 Goal: Create an Angular component that uses a pipe to format the product prices as currency. This will help you understand why pipes are needed to transform data in templates.

📋 What You'll Learn

Create a list of product prices as numbers

Add a variable to hold the currency code 'USD'

Use the Angular currency pipe to format prices in the template

Display the formatted prices in a list

💡 Why This Matters

🌍 Real World

Formatting data for display is common in apps, like showing prices, dates, or percentages in a user-friendly way.

💼 Career

Understanding pipes helps you build clean, readable Angular templates and improves user experience by showing data clearly.

1

Create product prices list

Create an array called prices with these exact numbers: 10, 20.5, 30, 40.99

Angular

# Create an array called prices with the numbers 10, 20.5, 30, 40.99
# Your code here

Need a hint?

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

2

Add currency code variable

Add a string variable called currencyCode and set it to 'USD'

Angular

prices = [10, 20.5, 30, 40.99]
# Add a variable currencyCode with value 'USD'
# Your code here

Need a hint?

Use single quotes for the string 'USD'.

3

Use currency pipe in template

In the Angular template, use *ngFor="let price of prices" to loop over prices. Inside the loop, display each price formatted with the Angular currency pipe using {{ price | currency:currencyCode }}

Angular

prices = [10, 20.5, 30, 40.99]
currencyCode = 'USD'



  

Need a hint?

Use *ngFor directive on the <li> tag and the pipe symbol | to apply the currency pipe.

4

Complete component template

Wrap the list inside a <section> tag with an aria-label of 'Product Prices' for accessibility

Angular

prices = [10, 20.5, 30, 40.99]
currencyCode = 'USD'



  
    {{ price | currency:currencyCode }}
  

Need a hint?

Use semantic HTML and add aria-label for screen readers.