*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.

Practice

1. What is the main purpose of the Angular directive *ngSwitch?

easy

A. To loop through a list of items and display them

B. To bind data from the component to the template

C. To display one template among many based on a matching value

D. To handle user input events like clicks

Solution

1. Step 1: Understand the role of *ngSwitch

   *ngSwitch is used to conditionally display one of many templates based on a value.

2. Step 2: Compare with other directives

   Unlike loops or event handlers, *ngSwitch chooses one template to show from multiple options.

3. Final Answer:

   To display one template among many based on a matching value -> Option C

4. Quick Check:

   *ngSwitch shows one option based on value = B [OK]

Hint: Remember *ngSwitch picks one view based on a value [OK]

Common Mistakes:

• Confusing *ngSwitch with *ngFor for looping
• Thinking *ngSwitch handles events
• Using *ngSwitch for data binding only

2. Which of the following is the correct syntax to use *ngSwitchCase inside an *ngSwitch block?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Recall Angular structural directive syntax

   Angular uses *directiveName="expression" syntax for structural directives.

2. Step 2: Match correct syntax for *ngSwitchCase

   The correct syntax is *ngSwitchCase="value", with quotes around the value.

3. Final Answer:

   <div *ngSwitchCase="value">Content</div> -> Option A

4. Quick Check:

   *ngSwitchCase uses = and quotes = A [OK]

Hint: Use *ngSwitchCase="value" with quotes and equals [OK]

Common Mistakes:

• Using colon instead of equals
• Missing the asterisk (*) before ngSwitchCase
• Using wrong attribute name like ngSwitch-case

3. Given this Angular template snippet:

<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Stop</div>
  <div *ngSwitchCase="'green'">Go</div>
  <div *ngSwitchCase="'yellow'">Wait</div>
  <div *ngSwitchDefault>Unknown</div>
</div>

What will be displayed if color = 'yellow'?

medium

A. Go

B. Wait

C. Stop

D. Unknown

Solution

1. Step 1: Identify the value of color

   The variable color is set to 'yellow'.

2. Step 2: Match color with *ngSwitchCase values

   The case *ngSwitchCase="'yellow'" matches the value.

3. Final Answer:

   Wait -> Option B

4. Quick Check:

   color='yellow' shows 'Wait' = A [OK]

Hint: Match the variable value exactly with ngSwitchCase string [OK]

Common Mistakes:

• Choosing default when a case matches
• Confusing case strings with variables
• Ignoring quotes around case values

4. What is wrong with this Angular snippet?

<div [ngSwitch]="status">
  <div *ngSwitchCase=active>Active</div>
  <div *ngSwitchCase="inactive">Inactive</div>
  <div *ngSwitchDefault>Unknown</div>
</div>

medium

A. Missing quotes around the first *ngSwitchCase value

B. Using [ngSwitch] instead of *ngSwitch

C. No *ngSwitchDefault provided

D. Using *ngSwitchCase instead of *ngSwitchWhen

Solution

1. Step 1: Check syntax of *ngSwitchCase values

   The first case uses *ngSwitchCase=active without quotes, which is invalid for string values.

2. Step 2: Confirm correct usage of quotes

   String values must be in quotes like *ngSwitchCase="'active'" or *ngSwitchCase="active" if active is a variable.

3. Final Answer:

   Missing quotes around the first *ngSwitchCase value -> Option A

4. Quick Check:

   String case values need quotes = C [OK]

Hint: Always quote string values in *ngSwitchCase [OK]

Common Mistakes:

• Omitting quotes around string cases
• Confusing [ngSwitch] with *ngSwitch
• Forgetting *ngSwitchDefault block

5. You want to display different messages for user roles: 'admin', 'editor', 'guest', and a default for others. Which Angular template correctly uses *ngSwitch to handle this?

hard

A.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

B.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

C.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

D.
Admin Panel
Editor Dashboard
Welcome Guest
Access Denied

Solution

1. Step 1: Check the main [ngSwitch] binding

   The main switch must use property binding syntax: [ngSwitch]="userRole".

2. Step 2: Verify *ngSwitchCase values are strings with quotes

   Each case value is a string and must be quoted like *ngSwitchCase="'admin'".

3. Step 3: Confirm default case is present

   The default case uses *ngSwitchDefault without a value, which is correct.

4. Final Answer:

   Correctly uses [ngSwitch] and quotes string cases -> Option D

5. Quick Check:

   Use [ngSwitch] and quote string cases = D [OK]

Hint: Use [ngSwitch] and quote string cases in *ngSwitchCase [OK]

Common Mistakes:

• Using *ngSwitch instead of [ngSwitch]
• Not quoting string case values
• Missing *ngSwitchDefault block