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.

Practice

1. What is the main purpose of a custom structural directive in Angular?

easy

A. To style elements with CSS classes

B. To fetch data from a server

C. To handle user input events

D. To add or remove HTML elements dynamically based on conditions

Solution

1. Step 1: Understand structural directives role

   Structural directives change the structure of the DOM by adding or removing elements.

2. Step 2: Identify the main use case

   Custom structural directives let you control when parts of the page appear or disappear dynamically.

3. Final Answer:

   To add or remove HTML elements dynamically based on conditions -> Option D

4. Quick Check:

   Structural directives = dynamic HTML blocks [OK]

Hint: Structural directives control HTML blocks, not styles or events [OK]

Common Mistakes:

• Confusing structural directives with attribute directives
• Thinking they handle styling or events
• Assuming they fetch data

2. Which of the following is the correct way to inject dependencies in a custom structural directive constructor?

easy

A. constructor(private http: HttpClient) {}

B. constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

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

D. constructor(private router: Router) {}

Solution

1. Step 1: Identify dependencies for structural directives

   Structural directives need TemplateRef to access the template and ViewContainerRef to insert or remove views.

2. Step 2: Match constructor parameters

   constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {} correctly injects TemplateRef and ViewContainerRef, which are essential for custom structural directives.

3. Final Answer:

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

4. Quick Check:

   TemplateRef + ViewContainerRef = constructor params [OK]

Hint: Use TemplateRef and ViewContainerRef in constructor for structural directives [OK]

Common Mistakes:

• Injecting ElementRef or Renderer2 which are for attribute directives
• Injecting unrelated services like HttpClient or Router
• Missing TemplateRef or ViewContainerRef

3. Given this directive code snippet, what will be the rendered output if appShowIf input is false?

@Directive({ selector: '[appShowIf]' })
export class ShowIfDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}
  @Input() set appShowIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

Usage:

<div *appShowIf="false">Hello World</div>

medium

A. Nothing will be rendered inside the div

B. The text 'Hello World' will be displayed

C. An error will occur because of wrong syntax

D. The div will be rendered but empty

Solution

1. Step 1: Analyze the directive behavior when condition is false

   When appShowIf is false, viewContainer.clear() removes any embedded views, so nothing is rendered.

2. Step 2: Understand the usage effect

   The <div> with 'Hello World' is inside the template controlled by the directive, so it won't appear if condition is false.

3. Final Answer:

   Nothing will be rendered inside the div -> Option A

4. Quick Check:

   False condition = no content shown [OK]

Hint: False input clears view container, so no content appears [OK]

Common Mistakes:

• Thinking the div still renders empty
• Assuming an error occurs
• Confusing attribute directives with structural directives

4. Identify the error in this custom structural directive code:

@Directive({ selector: '[appIf]' })
export class IfDirective {
  constructor(private templateRef: TemplateRef<any>) {}
  @Input() set appIf(condition: boolean) {
    if (condition) {
      this.templateRef.createEmbeddedView();
    }
  }
}

medium

A. Incorrect selector syntax in @Directive decorator

B. Missing ViewContainerRef injection and usage to insert the view

C. Wrong input property name, should be 'appIfCondition'

D. No error, code is correct

Solution

1. Step 1: Check constructor dependencies

   The directive injects only TemplateRef but misses ViewContainerRef, which is needed to insert or clear views.

2. Step 2: Analyze method usage

   Calling createEmbeddedView() on TemplateRef alone is invalid; it should be called on ViewContainerRef with TemplateRef as argument.

3. Final Answer:

   Missing ViewContainerRef injection and usage to insert the view -> Option B

4. Quick Check:

   ViewContainerRef required to add views [OK]

Hint: Always inject ViewContainerRef to add or remove views [OK]

Common Mistakes:

• Trying to create views directly from TemplateRef
• Forgetting to inject ViewContainerRef
• Misnaming input properties

5. You want to create a custom structural directive *appUnless that shows content only when a condition is false. Which implementation correctly achieves this behavior?

hard

A. Use if (!condition) to create the embedded view, else clear it

B. Use if (condition) to create the embedded view, else clear it

C. Always create the embedded view regardless of condition

D. Clear the view only when condition is false

Solution

1. Step 1: Understand the directive goal

   *appUnless should show content only when the condition is false, so the view is created when !condition.

2. Step 2: Match logic to code

   Using if (!condition) to create the embedded view and clearing it otherwise matches the requirement.

3. Final Answer:

   Use if (!condition) to create the embedded view, else clear it -> Option A

4. Quick Check:

   Show content when false = if (!condition) create view [OK]

Hint: Invert condition logic to show content only when false [OK]

Common Mistakes:

• Using if (condition) instead of if (!condition)
• Not clearing the view when condition is true
• Creating view unconditionally