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

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

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';

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

Hint

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

Practice

1. What does the Angular uppercase pipe do when applied to a string in a template?

easy

A. Reverses the string characters.

B. Converts all letters in the string to lowercase.

C. Capitalizes only the first letter of the string.

D. Converts all letters in the string to uppercase.

Solution

1. Step 1: Understand the purpose of the uppercase pipe

   The uppercase pipe is designed to transform text to all capital letters in Angular templates.

2. Step 2: Compare with other text transformations

   Unlike lowercase or capitalize, uppercase changes every letter to uppercase.

3. Final Answer:

   Converts all letters in the string to uppercase. -> Option D

4. Quick Check:

   uppercase pipe = all caps [OK]

Hint: Uppercase pipe makes all letters capital [OK]

Common Mistakes:

• Confusing uppercase with lowercase pipe
• Thinking it only capitalizes first letter
• Assuming it reverses the string

2. Which of the following is the correct syntax to format a date using Angular's date pipe to show only the year in a template?

easy

A. {{ myDate | date:'yyyy' }}

B. {{ myDate | date:'YYYY' }}

C. {{ myDate | date:'year' }}

D. {{ myDate | date:'yy' }}

Solution

1. Step 1: Recall Angular date pipe format codes

   Angular uses lowercase 'yyyy' to represent the full year in date pipe formatting.

2. Step 2: Check each option's format string

   {{ myDate | date:'yyyy' }} uses 'yyyy' correctly; A uses uppercase which is invalid; C uses 'year' which is not a valid format; D uses 'yy' which shows two-digit year.

3. Final Answer:

   {{ myDate | date:'yyyy' }} -> Option A

4. Quick Check:

   Year format = 'yyyy' [OK]

Hint: Use lowercase 'yyyy' for full year in date pipe [OK]

Common Mistakes:

• Using uppercase 'YYYY' instead of 'yyyy'
• Using descriptive words like 'year' instead of format codes
• Using 'yy' which shows only two digits

3. Given the Angular template code:

{{ 1234.5 | currency:'USD':'symbol':'1.2-2' }}

What will be the rendered output?

medium

A. $1,234.50

B. $1234.5

C. USD 1234.50

D. $1,234.5

Solution

1. Step 1: Understand the currency pipe parameters

   The currency pipe format is: currency code 'USD', display as symbol '$', and digit info '1.2-2' means minimum 1 digit before decimal, minimum 2 decimals, maximum 2 decimals.

2. Step 2: Apply formatting to the number 1234.5

   Number 1234.5 is formatted with commas and two decimals: $1,234.50.

3. Final Answer:

   $1,234.50 -> Option A

4. Quick Check:

   Currency pipe with '1.2-2' = two decimals [OK]

Hint: Currency pipe '1.2-2' means two decimals [OK]

Common Mistakes:

• Ignoring decimal places and showing one decimal
• Using currency code instead of symbol
• Not adding thousand separators

4. Identify the error in this Angular template code:

{{ today | date:'MM-DD-YYYY' }}

medium

A. The date pipe cannot format month and day.

B. The pipe name 'date' is misspelled.

C. The date format string uses uppercase 'YYYY' which is invalid.

D. The variable 'today' is not defined.

Solution

1. Step 1: Check the date format string correctness

   Angular date pipe requires lowercase 'yyyy' for year, not uppercase 'YYYY'.

2. Step 2: Verify other parts of the code

   The pipe name 'date' is correct, 'today' is assumed defined, and date pipe can format month and day.

3. Final Answer:

   The date format string uses uppercase 'YYYY' which is invalid. -> Option C

4. Quick Check:

   Date pipe year format = 'yyyy' lowercase [OK]

Hint: Use lowercase 'yyyy' in date pipe format strings [OK]

Common Mistakes:

• Using uppercase 'YYYY' instead of 'yyyy'
• Assuming pipe name is wrong
• Ignoring variable definition issues

5. You want to display a product price in Euros with the currency symbol and exactly 3 decimal places in Angular. Which pipe usage is correct?

hard

A. {{ price | currency:'EUR':'code':'1.2-2' }}

B. {{ price | currency:'EUR':'symbol':'1.3-3' }}

C. {{ price | currency:'EUR':'symbol':'1.0-2' }}

D. {{ price | currency:'USD':'symbol':'1.3-3' }}

Solution

1. Step 1: Identify the currency code and symbol usage

   To show Euros with symbol €, use currency code 'EUR' and display 'symbol'.

2. Step 2: Set decimal places to exactly 3

   The digit info '1.3-3' means minimum 1 digit before decimal, exactly 3 decimals.

3. Step 3: Check other options for correctness

   {{ price | currency:'EUR':'code':'1.2-2' }} uses 'code' display and 2 decimals; C uses 2 decimals; D uses USD instead of EUR.

4. Final Answer:

   {{ price | currency:'EUR':'symbol':'1.3-3' }} -> Option B

5. Quick Check:

   Currency EUR with 3 decimals = {{ price | currency:'EUR':'symbol':'1.3-3' }} [OK]

Hint: Use '1.3-3' for exactly 3 decimals in currency pipe [OK]

Common Mistakes:

• Using wrong currency code or symbol
• Setting wrong decimal places
• Mixing currency codes (USD instead of EUR)