*ngSwitch for multiple conditions in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Angular template using *ngSwitch?

Consider this Angular template snippet:

<div [ngSwitch]="status">
  <p *ngSwitchCase="'loading'">Loading...</p>
  <p *ngSwitchCase="'success'">Data loaded successfully!</p>
  <p *ngSwitchCase="'error'">Error occurred.</p>
  <p *ngSwitchDefault>Unknown status.</p>
</div>

If the component's status property is set to 'success', what will be displayed?

A Loading...

B Error occurred.

C Data loaded successfully!

D Unknown status.

💡 Hint

Look at which *ngSwitchCase matches the status value.

The *ngSwitchCase directive renders the block whose value matches the status. Since status is 'success', the second paragraph is shown.

📝 Syntax

intermediate

Which option correctly uses *ngSwitch with multiple cases for the same output?

You want to display the same message for both 'pending' and 'in-progress' statuses using *ngSwitch. Which template snippet is correct?

A

<pre><div [ngSwitch]="status">
  <p *ngSwitchCase="'pending'">Work in progress...</p>
  <p *ngSwitchCase="'in-progress'">Work in progress...</p>
  <p *ngSwitchDefault>Other status</p>
</div></pre>

B

<pre><div [ngSwitch]="status">
  <p *ngSwitchCase="'pending' || 'in-progress'">Work in progress...</p>
  <p *ngSwitchDefault>Other status</p>
</div></pre>

C

<pre><div [ngSwitch]="status">
  <p *ngSwitchCase="['pending', 'in-progress']">Work in progress...</p>
  <p *ngSwitchDefault>Other status</p>
</div></pre>

D

<pre><div [ngSwitch]="status">
  <p *ngSwitchCase="'pending' && 'in-progress'">Work in progress...</p>
  <p *ngSwitchDefault>Other status</p>
</div></pre>

💡 Hint

Remember that *ngSwitchCase accepts one value per case.

You cannot combine multiple values in one *ngSwitchCase using logical operators or arrays. You must write separate cases for each value.

❓ state_output

advanced

What is the rendered output when using *ngSwitch with nested conditions?

Given this Angular template and component code:

<div [ngSwitch]="user.role">
  <div *ngSwitchCase="'admin'">
    <span *ngSwitch="user.status">
      <em *ngSwitchCase="'active'">Admin Active</em>
      <em *ngSwitchCase="'inactive'">Admin Inactive</em>
      <em *ngSwitchDefault>Admin Unknown</em>
    </span>
  </div>
  <div *ngSwitchCase="'guest'">Guest User</div>
  <div *ngSwitchDefault>Unknown Role</div>
</div>

And the component has user = { role: 'admin', status: 'inactive' }. What will be displayed?

A Admin Active

B Unknown Role

C Guest User

D Admin Inactive

💡 Hint

Check the outer *ngSwitchCase first, then the inner one.

The outer switch matches 'admin', so the inner switch checks user.status. Since status is 'inactive', it renders 'Admin Inactive'.

🔧 Debug

advanced

Why does this *ngSwitch template not render the expected case?

Examine this Angular template:

<div [ngSwitch]="color">
  <p *ngSwitchCase="red">Red color</p>
  <p *ngSwitchCase="blue">Blue color</p>
  <p *ngSwitchDefault>Unknown color</p>
</div>

If the component's color property is set to 'red' (string), why does it always show 'Unknown color'?

A Because the [ngSwitch] directive requires a number, not a string.

B Because the *ngSwitchCase values are missing quotes, so they are treated as variables, not strings.

C Because *ngSwitchDefault always overrides other cases.

D Because the color property is not initialized in the component.

💡 Hint

Check how string literals are written in Angular templates.

The *ngSwitchCase values must be string literals enclosed in quotes. Without quotes, Angular treats them as variables, which are undefined, so no case matches.

🧠 Conceptual

expert

How does Angular's *ngSwitch handle multiple matching cases?

Consider an Angular template with multiple *ngSwitchCase directives that could match the same value due to overlapping expressions. What is Angular's behavior in this scenario?

A Angular renders only the first matching *ngSwitchCase and ignores the rest.

B Angular renders all matching *ngSwitchCase blocks simultaneously.

C Angular throws a runtime error due to multiple matches.

D Angular renders the last matching *ngSwitchCase and ignores the others.

💡 Hint

Think about how switch statements work in programming languages.

Angular's *ngSwitch behaves like a traditional switch: it renders only the first matching case and skips the rest.