Built-in pipes (date, currency, uppercase) in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Angular template?

Given the component property today = new Date('2024-06-15T12:00:00Z'), what will be displayed by this template?

<p>{{ today | date:'fullDate' }}</p>

Angular

<p>{{ today | date:'fullDate' }}</p>

A Saturday, June 15, 2024

B Jun 15, 2024

C 15/06/2024

D 2024-06-15

💡 Hint

The 'fullDate' format shows the day of the week, month name, day, and year.

The Angular date pipe with 'fullDate' format outputs the full weekday name, full month name, day, and year in the local format. For the given date, it renders as 'Saturday, June 15, 2024'.

📝 Syntax

intermediate

Which option correctly formats a number as US dollars with 2 decimals using Angular currency pipe?

You want to display the number 1234.5 as $1,234.50 in your template. Which pipe usage is correct?

Angular

<p>{{ amount | currency:??? }}</p>

A currency:'USD':'symbol':'1.0-0'

B currency:'USD':'code':'1.0-0'

C currency:'USD':'symbol':'2.0-2'

D currency:'USD':'symbol':'1.2-2'

💡 Hint

The format string '1.2-2' means minimum 1 digit before decimal, minimum 2 decimals, maximum 2 decimals.

Option D uses the correct format string '1.2-2' to show exactly two decimals, and 'symbol' to show the dollar sign. This produces '$1,234.50'. Other options either show no decimals or wrong decimal counts.

❓ component_behavior

advanced

What is the output of this Angular template using uppercase pipe?

Given the component property name = 'Angular', what will this template render?

<h1>{{ name | uppercase }}</h1>

Angular

<h1>{{ name | uppercase }}</h1>

A ANGULAR

B angular

C Angular

D AnGuLaR

💡 Hint

The uppercase pipe converts all letters to capital letters.

The uppercase pipe transforms all characters in the string to uppercase, so 'Angular' becomes 'ANGULAR'.

🔧 Debug

advanced

What happens in this Angular template with null input?

Consider this template snippet:

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

Given price = null in the component, what occurs and why?

Angular

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

A Syntax error due to wrong pipe usage

B No error; renders an empty string because the pipe returns null for null input

C Runtime error: Cannot read property 'toString' of null

D Displays 'null' as string without formatting

💡 Hint

Angular currency pipe returns null for null or undefined inputs, which renders as empty string in the template.

There is no error. The Angular currency pipe returns null when the input is null or undefined, so the template displays an empty string.

🧠 Conceptual

expert

How does Angular's date pipe handle timezone differences in output?

Given date = new Date('2024-06-15T12:00:00Z') and template {{ date | date:'short' }}, which statement is true about the displayed time?

Angular

{{ date | date:'short' }}

A The time is always shown in UTC

B The time is shown in the server's timezone

C The time is shown in the browser's local timezone

D The time is shown in GMT regardless of user location

💡 Hint

Angular date pipe formats dates according to the client environment.

Angular's date pipe formats dates using the browser's local timezone by default, so the time shown depends on the user's location.

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)