Template expressions and statements in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be displayed by this Angular template expression?

Given the component property count = 5, what will this template expression show?

{{ count > 3 ? 'High' : 'Low' }}

A High

B Low

C 5

D count > 3 ? 'High' : 'Low'

💡 Hint

Check the condition inside the expression and what it returns.

The expression checks if count is greater than 3. Since 5 > 3, it returns 'High'.

📝 Syntax

intermediate

Which template expression will cause a syntax error?

Identify the Angular template expression that will cause a syntax error.

A {{ count > 5 ? 'Many' 'Few' }}

B {{ (items.length > 0) && 'Has items' }}

C {{ user?.age ?? 'Unknown' }}

D {{ user.name | uppercase }}

💡 Hint

Look for missing operators or incorrect ternary syntax.

Option A misses the colon : in the ternary operator, causing a syntax error.

❓ state_output

advanced

What is the value of message after this template statement executes?

Consider this Angular component snippet:

message = '';

What will be the value of message after clicking the button once?

A '' (empty string)

B undefined

C 'Clicked!'

D null

💡 Hint

What does the (click) event do to the message variable?

The click event sets message to 'Clicked!'.

🔧 Debug

advanced

Why does this Angular template expression cause an error?

Given the component property user = null, why does this template expression cause an error?

{{ user.name }}

A Because the expression syntax is invalid

B Because Angular does not allow dot notation in templates

C Because <code>user</code> is undefined, not null

D Because <code>user</code> is null and accessing <code>name</code> causes a runtime error

💡 Hint

Think about what happens when you try to access a property of null.

Accessing user.name when user is null causes a runtime error because null has no properties.

🧠 Conceptual

expert

Which statement about Angular template expressions and statements is correct?

Choose the correct statement about Angular template expressions and statements.

A Template expressions can contain assignments like <code>a = 5</code> but statements cannot

B Template statements can call methods and change component state, but expressions cannot

C Template expressions can include loops and conditionals like <code>for</code> and <code>if</code> statements

D Template statements are used only for displaying data, not for event handling

💡 Hint

Think about what expressions and statements are allowed to do in Angular templates.

Template expressions are for displaying data and cannot change state. Template statements handle events and can change state.