*ngSwitch for multiple conditions in Angular - Step-by-Step Execution

Concept Flow - *ngSwitch for multiple conditions

Start with a value

↓

Evaluate *ngSwitch expression

↓

Compare with *ngSwitchCase values

↓

Case1

↓

Render matching case block

↓

End

The *ngSwitch directive evaluates an expression and renders the matching *ngSwitchCase block or the *ngSwitchDefault if no match.

Execution Sample

Angular

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

This code shows how Angular renders a paragraph based on the value of 'color' using *ngSwitch and multiple *ngSwitchCase blocks.

Execution Table

Step	*ngSwitch Expression Value	Checked Case	Match?	Rendered Content
1	'red'	'red'	Yes	'Red selected' paragraph rendered
2	'blue'	'red'	No	No render
3	'blue'	'blue'	Yes	'Blue selected' paragraph rendered
4	'green'	'red'	No	No render
5	'green'	'blue'	No	No render
6	'green'	Default	Yes	'Other color' paragraph rendered
7	'yellow'	'red'	No	No render
8	'yellow'	'blue'	No	No render
9	'yellow'	Default	Yes	'Other color' paragraph rendered
10	N/A	N/A	N/A	End of switch evaluation

💡 No more cases to check; rendering completed based on match or default.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	Final
color	'red'	'blue'	'blue'	'green'	'green'	'green'	'yellow'	N/A
Rendered Content	''	'Red selected'	'Blue selected'	'Blue selected'	'Other color'	'Other color'	'Other color'	N/A

Key Moments - 2 Insights

Why does Angular render the default block when the value doesn't match any case?

Because none of the *ngSwitchCase values matched the expression, Angular falls back to *ngSwitchDefault as shown in rows 6 and 9 of the execution_table.

Does Angular check all cases even after finding a match?

No, Angular stops checking once it finds a matching *ngSwitchCase, as seen in step 1 and 3 where rendering happens immediately.

Visual Quiz - 3 Questions

Look at the execution table, what content is rendered when color is 'blue' at step 3?

A 'Red selected' paragraph

B 'Other color' paragraph

C 'Blue selected' paragraph

D No content rendered

💡 Hint

Check row 3 under Rendered Content in the execution_table.

At which step does the condition become false for the 'red' case when color is 'green'?

A Step 5

B Step 4

C Step 6

D Step 3

💡 Hint

Look at step 4 where color 'green' is checked against 'red' case in the execution_table.

If the *ngSwitchDefault block is removed, what happens when color is 'yellow'?

A No content is rendered

B 'Red selected' paragraph is rendered

C 'Blue selected' paragraph is rendered

D 'Other color' paragraph is rendered

💡 Hint

Refer to steps 7-9 where 'yellow' matches no case and default is used.

Concept Snapshot

*ngSwitch lets you show one block out of many based on a value.
Use [ngSwitch] on a container and *ngSwitchCase on children.
If no case matches, *ngSwitchDefault shows.
Angular stops checking after the first match.
Great for clean multiple condition rendering.

Full Transcript

The *ngSwitch directive in Angular evaluates a value and compares it to multiple *ngSwitchCase values. It renders the matching case's content or the *ngSwitchDefault content if no match is found. The evaluation stops once a match is found. This helps display different content based on a variable cleanly. For example, if the variable 'color' is 'red', the paragraph with 'Red selected' is shown. If 'color' is 'green' and no case matches, the default paragraph 'Other color' is shown. This visual trace shows each step Angular takes to decide what to render.

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