Pipe chaining in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular template with pipe chaining?

Given the component property name = 'Angular', what will be displayed by this template?

<div>{{ name | lowercase | slice:0:4 | uppercase }}</div>

A ANGU

B angu

C ANGULAR

D anguL

💡 Hint

Remember that pipes are applied from left to right, and each pipe transforms the output of the previous one.

The lowercase pipe converts 'Angular' to 'angular'. Then slice:0:4 extracts 'angu'. Finally, uppercase converts it to 'ANGU'.

📝 Syntax

intermediate

Which option correctly chains pipes to format a date and then uppercase it?

Assuming today = new Date('2024-06-15'), which template expression correctly formats the date as 'Jun 15, 2024' and then converts it to uppercase?

A {{ today | date:'MMM d, y' | toUpperCase }}

B {{ today | date:'MMM d, y' | uppercase }}

C {{ today | uppercase | date:'MMM d, y' }}

D {{ today | date:'MMM d, y' | uppercase() }}

💡 Hint

Pipes are chained left to right. The uppercase pipe works on strings, so it must come after the date pipe.

Option B correctly formats the date first, then uppercases the string. Option B tries to uppercase a Date object, which fails. Options A and D use invalid pipe syntax.

🔧 Debug

advanced

What happens with this pipe chaining when value is null?

Given value = null, what happens with this template?

<div>{{ value | uppercase | slice:0:3 }}</div>

A No error, outputs empty string

B TypeError: Cannot read property 'toString' of null

C SyntaxError: Unexpected token ':'

D Runtime error: slice is not a function

💡 Hint

Angular built-in pipes like uppercase and slice handle null safely without throwing errors.

No error occurs. The uppercase pipe returns null for null input, and the slice pipe returns an empty string.

❓ state_output

advanced

What is the displayed output after changing component state?

Component code:

name = 'Angular';
changeName() { this.name = 'Framework'; }

Template:

<div>{{ name | slice:0:4 | uppercase }}</div>
<button (click)="changeName()">Change</button>

What is shown before and after clicking the button?

A Before: ANGULAR, After: FRAME

B Before: ANGU, After: ANGU

C Before: ANGU, After: FRAM

D Before: ANGU, After: FRAME

💡 Hint

Remember slice:0:4 takes first 4 characters, and uppercase converts to uppercase.

Initially, 'Angular' sliced to 'Angu' then uppercased to 'ANGU'. After changing to 'Framework', sliced to 'Fram' then uppercased to 'FRAM'.

🧠 Conceptual

expert

Why is pipe chaining order important in Angular templates?

Consider these two expressions:

1. {{ text | lowercase | slice:0:3 }}
2. {{ text | slice:0:3 | lowercase }}

Which statement is true?

A They always produce the same output regardless of order.

B Pipes can only be chained if they are of the same type.

C Angular automatically optimizes pipe order to produce correct output.

D Order matters because each pipe transforms the input for the next pipe.

💡 Hint

Think about how the output of one pipe becomes the input of the next.

Pipe chaining applies pipes left to right. Changing order changes intermediate values, so output can differ.