Why pipes are needed in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use a pipe that formats a date in Angular.

Angular

<p>{{ today [1] date:'shortDate' }}</p>

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

A|

B:

C.

D#

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':' instead of '|' to apply a pipe.

In Angular, pipes are used with the | symbol to transform data in templates.

2fill in blank

medium

Complete the code to transform a string to uppercase using a pipe.

Angular

<p>{{ name [1] uppercase }}</p>

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

A|

B#

C.

D:

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':' or '.' instead of '|' for pipes.

The | symbol is used to apply pipes like uppercase in Angular templates.

3fill in blank

hard

Fix the error in the code to correctly format a number with a pipe.

Angular

<p>{{ amount [1] currency }}</p>

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

A:

B#

C.

D|

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':' instead of '|' causes syntax errors.

The pipe symbol | is required to apply the currency pipe in Angular.

4fill in blank

hard

Complete the code to create a pipe that formats a number as a percent with two decimals.

Angular

<p>{{ value [1] percent : '1.2-2' }}</p>

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

A|

B:

C,

D.

Attempts:

3 left

💡 Hint

Common Mistakes

Using ',' or '.' instead of ':' for pipe parameters.

The pipe symbol | applies the pipe, and : passes parameters to the pipe.

5fill in blank

hard

Complete the code to chain pipes that first uppercase a string and then slice it.

Angular

<p>{{ text [1] uppercase  | slice: 0:5 }}</p>

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

A|

B:

D,

Attempts:

3 left

💡 Hint

Common Mistakes

Missing pipe symbol between pipes or wrong parameter separator.

Use | to chain pipes and : to pass arguments to pipes.