Directive execution and DOM manipulation in Angular - Step-by-Step Execution

Concept Flow - Directive execution and DOM manipulation

Angular Compiler Reads Template

↓

Identify Directive on Element

↓

Create Directive Instance

↓

Call Directive Constructor

↓

Run Directive Lifecycle Hooks

↓

Directive Manipulates DOM or Host Element

↓

Angular Updates Rendered DOM

↓

User Interaction Triggers Directive Logic

↓

Directive Updates DOM or State

↓

Angular Reflects Changes in Browser

Angular reads the template, creates directive instances, runs their logic to manipulate the DOM, and updates the browser view accordingly.

Execution Sample

Angular

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

@Directive({ selector: '[highlight]' })
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

This directive highlights the host element by setting its background color to yellow when created.

Execution Table

Step	Action	Directive State	DOM Change	Notes
1	Angular reads template and finds element with [highlight]	No instance	No change	Directive identified on element
2	Angular creates HighlightDirective instance	Instance created	No change yet	Constructor about to run
3	HighlightDirective constructor runs	Instance active	Sets backgroundColor to yellow	DOM style updated
4	Angular renders updated DOM	Instance active	Element background is yellow	User sees highlight
5	User clicks element (event triggers directive logic if any)	Instance active	No change (no event handler here)	No further DOM update
6	Directive lifecycle ends (component destroyed)	Instance destroyed	DOM cleaned if needed	Directive removed
7	End of directive lifecycle	No instance	DOM back to normal if cleaned	Execution stops

💡 Directive lifecycle ends when component or element is destroyed, stopping DOM manipulation.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
Directive Instance	None	Created	Active	Active	Destroyed
Element Style.backgroundColor	undefined	undefined	'yellow'	'yellow'	undefined or reset

Key Moments - 3 Insights

Why does the DOM style change happen inside the constructor?

The constructor runs right after the directive instance is created (see step 3 in execution_table), so it can immediately manipulate the host element's DOM.

Does Angular update the DOM immediately after the directive changes it?

Yes, after the directive changes the DOM (step 3), Angular reflects those changes in the rendered DOM (step 4), so the user sees the update.

What happens if the directive has no event handlers?

If no event handlers exist (step 5), user interactions do not cause further DOM changes, so the DOM remains as last updated.

Visual Quiz - 3 Questions

Look at the execution_table, what is the DOM background color after step 3?

A 'red'

B undefined

C 'yellow'

D 'blue'

💡 Hint

Check the 'DOM Change' column at step 3 in the execution_table.

At which step does Angular render the updated DOM so the user sees the highlight?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for when the 'Angular renders updated DOM' action happens in the execution_table.

If the directive had an event handler that changed the background to green on click, what would change in the execution_table?

A Step 5 would show a DOM change to green background

B Step 3 would change background to green

C Step 4 would be skipped

D Step 6 would happen earlier

💡 Hint

Consider the 'User clicks element' step and what happens if event logic changes DOM.

Concept Snapshot

Angular Directive Execution & DOM Manipulation:
- Angular finds directives in templates
- Creates directive instances and runs constructor
- Directive manipulates host element DOM (e.g., styles)
- Angular updates rendered DOM to show changes
- User events can trigger further DOM updates
- Directive lifecycle ends when element destroyed

Full Transcript

Angular directives are special classes that attach to elements in templates. When Angular compiles the template, it finds elements with directives and creates instances of those directives. The directive constructor runs immediately, allowing it to manipulate the host element's DOM, such as changing styles. Angular then updates the browser's rendered DOM so the user sees these changes. If the directive has event handlers, user interactions can trigger more DOM updates. Finally, when the component or element is destroyed, the directive instance is removed and any DOM cleanup happens. This flow ensures directives can control and update the DOM dynamically during the app's lifecycle.

Practice

1. What is the primary purpose of an Angular directive?

easy

A. To create new Angular modules

B. To add or change behavior on HTML elements

C. To define routes in the application

D. To manage HTTP requests

Solution

1. Step 1: Understand what directives do

   Directives in Angular are used to add or change behavior on HTML elements, such as changing styles or responding to events.

2. Step 2: Compare with other Angular features

   Modules organize code, routes manage navigation, and HTTP requests handle data fetching, which are not the main roles of directives.

3. Final Answer:

   To add or change behavior on HTML elements -> Option B

4. Quick Check:

   Directive purpose = Add/change behavior [OK]

Hint: Directives change element behavior, not app structure [OK]

Common Mistakes:

• Confusing directives with modules
• Thinking directives manage routing
• Assuming directives handle HTTP

2. Which syntax correctly injects Renderer2 in a directive's constructor?

easy

A. constructor(renderer: Renderer2 private) {}

B. constructor(Renderer2 private renderer) {}

C. constructor(private Renderer2 renderer) {}

D. constructor(private renderer: Renderer2) {}

Solution

1. Step 1: Recall Angular dependency injection syntax

   Angular uses TypeScript constructor parameters with access modifiers like 'private' before the variable name and type after the colon.

2. Step 2: Match correct syntax

   constructor(private renderer: Renderer2) {} follows the pattern: 'constructor(private renderer: Renderer2) {}'. Other options have incorrect order or missing colons.

3. Final Answer:

   constructor(private renderer: Renderer2) {} -> Option D

4. Quick Check:

   Correct DI syntax = private name: Type [OK]

Hint: Use 'private name: Type' in constructor for DI [OK]

Common Mistakes:

• Swapping parameter order
• Omitting colon between name and type
• Placing access modifier after type

3. Given this directive code, what will happen when the user clicks the host element?

import { Directive, HostListener, Renderer2, ElementRef } from '@angular/core';

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click') onClick() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }
}

medium

A. The element's text color changes to yellow on click

B. Nothing happens on click

C. The element's background color changes to yellow on click

D. An error occurs because Renderer2 is not used correctly

Solution

1. Step 1: Understand @HostListener usage

   The @HostListener('click') decorator listens for click events on the host element and triggers the onClick method.

2. Step 2: Analyze onClick method

   Inside onClick, Renderer2 sets the backgroundColor style of the element to 'yellow'. This changes the element's background color on click.

3. Final Answer:

   The element's background color changes to yellow on click -> Option C

4. Quick Check:

   @HostListener + Renderer2 changes background [OK]

Hint: HostListener triggers method; Renderer2 safely changes style [OK]

Common Mistakes:

• Confusing backgroundColor with text color
• Assuming no effect without manual event binding
• Thinking Renderer2 usage causes error

4. Identify the error in this directive code snippet:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({ selector: '[appColor]' })
export class ColorDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'color', 'blue');
  }
}

medium

A. Missing access modifiers in constructor parameters prevent DI

B. Renderer2 cannot set styles directly

C. Selector syntax is invalid

D. ElementRef should not be used in directives

Solution

1. Step 1: Check constructor parameters for DI

   Angular dependency injection requires constructor parameters to have access modifiers like 'private' or 'public' to assign them as class properties.

2. Step 2: Identify missing access modifiers

   Here, 'el' and 'renderer' lack 'private' or 'public', so Angular won't inject them properly, causing runtime errors.

3. Final Answer:

   Missing access modifiers in constructor parameters prevent DI -> Option A

4. Quick Check:

   DI needs access modifiers in constructor [OK]

Hint: Always add 'private' or 'public' for DI in constructor [OK]

Common Mistakes:

• Thinking Renderer2 can't set styles
• Believing selector syntax is wrong
• Assuming ElementRef is disallowed

5. You want to create a directive that toggles a CSS class active on the host element when the user hovers over it, and removes it when the mouse leaves. Which approach correctly implements this behavior?

hard

A. Use two @HostListener methods for 'mouseenter' and 'mouseleave' to add and remove the class using Renderer2

B. Use a single @HostListener for 'click' to toggle the class

C. Directly modify the element's classList without Renderer2 inside the constructor

D. Use @HostBinding to bind a boolean and toggle it manually without event listeners

Solution

1. Step 1: Understand event requirements

   Hover behavior requires reacting to 'mouseenter' and 'mouseleave' events to add and remove the class.

2. Step 2: Use Renderer2 with @HostListener

   Using two @HostListener methods for these events and Renderer2 to add/remove the 'active' class is the safe and correct Angular way.

3. Final Answer:

   Use two @HostListener methods for 'mouseenter' and 'mouseleave' to add and remove the class using Renderer2 -> Option A

4. Quick Check:

   Hover needs mouseenter/mouseleave + Renderer2 [OK]

Hint: Use separate HostListeners for mouseenter and mouseleave [OK]

Common Mistakes:

• Using click event instead of hover events
• Manipulating DOM directly without Renderer2
• Relying only on @HostBinding without events