Parameterized pipes in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use the built-in Angular date pipe with a format parameter.

Angular

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

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

A'json'

B'uppercase'

C'currency'

D'shortDate'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a pipe parameter that is not a valid date format string.

Forgetting to put the format string in quotes.

The Angular date pipe formats dates. The parameter 'shortDate' shows a short date format.

2fill in blank

medium

Complete the code to use a custom pipe named 'exclaim' with a parameter for the number of exclamation marks.

Angular

<p>{{ message | exclaim: [1] }}</p>

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

A'3'

B3

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the number as a string with quotes.

Passing a boolean or null instead of a number.

The parameter for the custom pipe should be a number without quotes to specify how many exclamation marks to add.

3fill in blank

hard

Fix the error in the pipe usage by completing the parameter correctly.

Angular

<p>{{ price | currency: [1] }}</p>

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

A'USD'

BUSD

C100

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the currency code without quotes causing a syntax error.

Passing a number or boolean instead of a string.

The currency pipe expects the currency code as a string in quotes, like 'USD'.

4fill in blank

hard

Fill both blanks to use the Angular slice pipe with start and end parameters.

Angular

<p>{{ text | slice: [1] : [2] }}</p>

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

A2

B5

C'2'

D'5'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing indexes as strings with quotes.

Using only one parameter instead of two.

The slice pipe takes numeric start and end indexes without quotes to slice the string.

5fill in blank

hard

Fill all three blanks to use a custom pipe 'repeat' with a string and a number parameter.

Angular

<p>{{ word | repeat: [1] : [2] : [3] }}</p>

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

A'! '

B3

C'- '

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Passing numbers as strings or strings as numbers.

Mixing up the order of parameters.

The custom pipe 'repeat' takes a string separator and two numbers for repetition count and spacing.