Pipe chaining in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to chain two pipes in Angular template.

Angular

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

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

A:

B|

C&

D||

Attempts:

3 left

💡 Hint

Common Mistakes

Using logical operators like & or || instead of the pipe symbol.

Using colon : which is for pipe parameters, not chaining.

In Angular templates, pipes are chained using the pipe symbol |.

2fill in blank

medium

Complete the code to chain 'uppercase' and 'slice' pipes to show first 5 letters in uppercase.

Angular

<p>{{ name [1] uppercase [2] slice:0:5 }}</p>

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

A:

B|

C&

D||

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon : to chain pipes instead of parameters.

Using logical operators instead of pipe symbol.

Use the pipe symbol | to chain pipes. Parameters use colon :.

3fill in blank

hard

Fix the error in chaining 'date' and 'uppercase' pipes to format date and convert to uppercase.

Angular

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

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

A|

B:

C&

D||

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon : to chain pipes instead of parameters.

Using logical operators instead of pipe symbol.

Use the pipe symbol | to chain pipes. Parameters use colon :.

4fill in blank

hard

Fill both blanks to chain 'lowercase' and 'slice' pipes to show last 3 letters in lowercase.

Angular

<p>{{ word [1] lowercase [2] slice:-3 }}</p>

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

A|

B:

C&

D||

Attempts:

3 left

💡 Hint

Common Mistakes

Using colon : to chain pipes instead of parameters.

Using logical operators instead of pipe symbol.

Both blanks need the pipe symbol | to chain the pipes correctly.

5fill in blank

hard

Fill all three blanks to chain 'slice', 'uppercase', and 'replace' pipes to show first 4 letters uppercase and replace 'A' with '@'.

Angular

<p>{{ text [1] slice:0:4 [2] uppercase [3] replace:'A':'@' }}</p>

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

A|

B:

D&

Attempts:

3 left

💡 Hint

Common Mistakes

Using logical operators instead of pipe symbol.

Using colon to chain pipes instead of parameters.

Use pipe symbol | to chain pipes and colon : for parameters inside pipes.