Built-in pipes (date, currency, uppercase) in Angular - Mini Project: Build & Apply

Using Built-in Pipes: date, currency, uppercase in Angular

📖 Scenario: You are building a simple Angular component to display product details in an online store. You want to show the product name in uppercase, the release date in a friendly format, and the price formatted as currency.

🎯 Goal: Create an Angular standalone component that uses built-in pipes to format the product name in uppercase, the release date using the date pipe, and the price using the currency pipe.

📋 What You'll Learn

Create a product object with name, releaseDate, and price properties

Add a variable to hold the currency code 'USD'

Use the uppercase pipe to display the product name in uppercase

Use the date pipe to format the releaseDate as 'fullDate'

Use the currency pipe to format the price with the currency code

💡 Why This Matters

🌍 Real World

Formatting dates, currency, and text case is common in e-commerce and business apps to improve readability and user experience.

💼 Career

Knowing how to use Angular built-in pipes is essential for frontend developers to display data cleanly and professionally.

1

Create the product data object

Create a variable called product as an object with these exact properties and values: name set to 'Smartphone', releaseDate set to new Date('2023-05-15'), and price set to 799.99.

Angular

# Your code here

Need a hint?

Use an object literal with the exact property names and values.

2

Add currency code variable

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

Angular

product = {
  name: 'Smartphone',
  releaseDate: new Date('2023-05-15'),
  price: 799.99
};
# Your code here

Need a hint?

Just create a simple string variable for the currency code.

3

Use pipes in the template for formatting

In the component template, use interpolation to display the product name with the uppercase pipe, the releaseDate with the date pipe using the format 'fullDate', and the price with the currency pipe using the currencyCode variable.

Angular

product = {
  name: 'Smartphone',
  releaseDate: new Date('2023-05-15'),
  price: 799.99
};
currencyCode = 'USD';

Need a hint?

Use interpolation with the pipe symbol | and the exact pipe names and parameters.

4

Complete the Angular standalone component

Create a standalone Angular component named ProductDisplayComponent with the product and currencyCode variables in the class, and the template showing the formatted product details using the pipes as in step 3. Use the @Component decorator with standalone: true and include CommonModule in the imports.

Angular

// Your code here to create the standalone component with the above variables and template

Need a hint?

Use the Angular @Component decorator with standalone and imports, and include the template with the pipes.