Custom structural directives in Angular - Performance & Optimization

Performance: Custom structural directives

MEDIUM IMPACT

Custom structural directives affect how Angular manipulates the DOM structure, impacting rendering speed and layout stability.

Conditionally adding or removing elements in the DOM

Angular

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appGoodIf]' })
export class GoodIfDirective {
  private hasView = false;

  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  set appGoodIf(condition: boolean) {
    if (condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

Only creates or clears views when the condition actually changes, reducing unnecessary DOM operations.

📈 Performance GainReduces reflows to only when the DOM truly changes, improving CLS and rendering performance.

Conditionally adding or removing elements in the DOM

Angular

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appBadIf]' })
export class BadIfDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  set appBadIf(condition: boolean) {
    this.viewContainer.clear();
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }
}

Clearing and recreating views on every condition change triggers multiple reflows and layout shifts.

📉 Performance CostTriggers 1 reflow per condition change, causing visible layout shifts (CLS impact).

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Clearing and recreating views on every condition change	Multiple clears and creates	Triggers 1 reflow per change	High paint cost due to layout shifts	[X] Bad
Tracking view state and updating only on change	Minimal DOM operations	Reflows only on actual DOM changes	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Custom structural directives control DOM insertion and removal, affecting the Layout and Paint stages by changing element presence and triggering reflows.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout

Core Web Vital Affected

CLS

Custom structural directives affect how Angular manipulates the DOM structure, impacting rendering speed and layout stability.

Optimization Tips

1Avoid clearing and recreating views unnecessarily in structural directives.

2Track the current view state to minimize DOM operations.

3Test directives with DevTools Performance panel to detect excessive reflows.

Performance Quiz - 3 Questions

What is the main performance cost of a custom structural directive that clears and recreates views on every condition change?

A Triggers multiple reflows causing layout shifts

B Increases JavaScript bundle size significantly

C Blocks network requests during rendering

D Causes excessive paint events without layout changes

DevTools: Performance

How to check: Record a performance profile while toggling the directive condition. Look for frequent Layout events and long tasks.

What to look for: High frequency of Layout and Recalculate Style events indicates inefficient DOM updates causing reflows.