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.