*ngSwitch for multiple conditions in Angular - Performance & Optimization

Performance: *ngSwitch for multiple conditions

MEDIUM IMPACT

This affects rendering speed and visual stability by controlling which elements are added or removed from the DOM based on multiple conditions.

Rendering different UI blocks based on multiple conditions

Angular

<div [ngSwitch]="condition">
  <div *ngSwitchCase="'condition1'">Block 1</div>
  <div *ngSwitchCase="'condition2'">Block 2</div>
  <div *ngSwitchCase="'condition3'">Block 3</div>
  <div *ngSwitchDefault>Default Block</div>
</div>

Only one DOM subtree is rendered at a time, reducing reflows and layout shifts.

📈 Performance GainSingle reflow per switch change, reducing CLS and improving rendering speed.

Rendering different UI blocks based on multiple conditions

Angular

<div *ngIf="condition1">Block 1</div>
<div *ngIf="condition2">Block 2</div>
<div *ngIf="condition3">Block 3</div>

Multiple *ngIf directives cause Angular to create and destroy multiple DOM nodes independently, triggering multiple reflows and layout shifts.

📉 Performance CostTriggers multiple reflows and layout shifts, increasing CLS and slowing rendering.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple *ngIf for each condition	Multiple nodes created/destroyed independently	Multiple reflows per condition change	Higher paint cost due to layout shifts	[X] Bad
Single *ngSwitch with cases	Only one node subtree created/destroyed	Single reflow per switch change	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Angular evaluates the switch expression and renders only the matching case block. This reduces the number of DOM nodes created or destroyed compared to multiple independent *ngIfs.

→DOM Operations

→Layout

→Paint

⚠️ BottleneckLayout due to multiple independent DOM insertions/removals in bad pattern

Core Web Vital Affected

CLS

This affects rendering speed and visual stability by controlling which elements are added or removed from the DOM based on multiple conditions.

Optimization Tips

1Use *ngSwitch to render only one block among many conditions to reduce DOM updates.

2Avoid multiple independent *ngIfs for mutually exclusive content to prevent layout thrashing.

3Reducing DOM changes improves visual stability and lowers Cumulative Layout Shift (CLS).

Performance Quiz - 3 Questions

What is the main performance benefit of using *ngSwitch over multiple *ngIf directives for multiple conditions?

A It adds more event listeners to the page.

B It increases the number of reflows to update the layout.

C It reduces the number of DOM nodes created and destroyed at once.

D It delays rendering until all conditions are checked.

DevTools: Performance

How to check: Record a performance profile while toggling conditions. Look for layout thrashing and multiple reflows in the flame chart.

What to look for: Multiple layout events indicate inefficient DOM updates; fewer layout events with *ngSwitch show better performance.

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