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