ng-content for slot-based composition in Angular - Performance & Optimization

Performance: ng-content for slot-based composition

MEDIUM IMPACT

This affects rendering speed and layout stability by controlling how content is projected into components.

Projecting multiple content slots inside an Angular component

Angular

<div>
  <ng-content select="[header]"></ng-content>
  <ng-content select="[main]"></ng-content>
</div>

Using named slots with select attributes ensures content is projected predictably, reducing layout shifts.

📈 Performance Gainsingle reflow with stable layout, reducing CLS

Projecting multiple content slots inside an Angular component

Angular

<div>
  <ng-content></ng-content>
  <ng-content></ng-content>
</div>

Using multiple unnamed ng-content tags causes all projected content to be duplicated or misplaced, triggering layout shifts.

📉 Performance Costtriggers multiple reflows and causes CLS due to unstable content placement

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple unnamed ng-content	Duplicates projected nodes	Multiple reflows	High paint cost due to layout shifts	[X] Bad
Named ng-content slots with select	Projects nodes once correctly	Single reflow	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Content projection with ng-content affects the Layout and Paint stages by inserting external content into the component's DOM structure.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to recalculating positions after content projection

Core Web Vital Affected

CLS

This affects rendering speed and layout stability by controlling how content is projected into components.

Optimization Tips

1Use named ng-content slots to project content predictably and reduce layout shifts.

2Avoid multiple unnamed ng-content tags to prevent duplicated content and reflows.

3Keep projected content simple to minimize layout recalculations and paint costs.

Performance Quiz - 3 Questions

What is the main performance benefit of using named ng-content slots in Angular?

A It eliminates the need for CSS styling.

B It decreases JavaScript bundle size significantly.

C It reduces layout shifts by projecting content predictably.

D It speeds up server-side rendering.

DevTools: Performance

How to check: Record a performance profile while loading the component with projected content. Look for layout shifts and reflows in the flame chart.

What to look for: Check for multiple Layout events and large Layout Shift scores indicating unstable content projection.