Built-in pipes (date, currency, uppercase) in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the current date using Angular's date pipe.

Angular

<p>Today is {{ currentDate [1] }}</p>

Drag options to blanks, or click blank then click option'

A| json

B| currency

C| uppercase

D| date

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong pipe like currency or uppercase for dates.

Forgetting the pipe symbol |.

The date pipe formats a date value according to locale rules.

2fill in blank

medium

Complete the code to display a price formatted as US dollars using Angular's currency pipe.

Angular

<p>Price: {{ price [1] }}</p>

Drag options to blanks, or click blank then click option'

A| uppercase

B| date

C| currency:'USD'

D| json

Attempts:

3 left

💡 Hint

Common Mistakes

Using the date pipe for numbers.

Omitting the currency code parameter.

The currency pipe formats numbers as currency. Adding :'USD' sets the currency to US dollars.

3fill in blank

hard

Fix the error in the code to convert the username to uppercase using Angular's uppercase pipe.

Angular

<p>User: {{ username [1] }}</p>

Drag options to blanks, or click blank then click option'

A| uppercase

B| currency

C| date

D| lowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase instead of uppercase.

Forgetting the pipe symbol |.

The uppercase pipe converts text to all uppercase letters.

4fill in blank

hard

Fill both blanks to display the current date in short format and the price in Euros.

Angular

<p>Date: {{ today [1] }}</p>
<p>Cost: {{ cost [2] }}</p>

Drag options to blanks, or click blank then click option'

A| date:'shortDate'

B| currency:'USD'

C| currency:'EUR'

D| uppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing currency codes or using the wrong date format.

Forgetting to add quotes around the format or currency code.

The date pipe with 'shortDate' formats the date shortly. The currency pipe with 'EUR' formats the number as Euros.

5fill in blank

hard

Fill all three blanks to display the username in uppercase, the current date in full format, and the price in British pounds.

Angular

<p>Name: {{ user [1] }}</p>
<p>Date: {{ currentDate [2] }}</p>
<p>Amount: {{ amount [3] }}</p>

Drag options to blanks, or click blank then click option'

A| uppercase

B| date:'fullDate'

C| currency:'GBP'

D| lowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase instead of uppercase for the username.

Using wrong date format strings.

Using wrong currency codes.

The uppercase pipe converts text to uppercase. The date pipe with 'fullDate' shows the full date. The currency pipe with 'GBP' formats the amount as British pounds.