Directive execution and DOM manipulation in Angular

Introduction

Directives let you change how the page looks or behaves by working directly with the page elements. They help you add or change things on the page easily.

When you want to add special behavior to an HTML element, like changing its color on click.

When you need to create reusable UI features that can be attached to many elements.

When you want to listen to user actions and update the page without reloading.

When you want to manipulate the page structure or styles dynamically.

When you want to build custom controls or animations that interact with the page.

Syntax

Angular

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

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

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'background-color');
  }
}

Use @Directive to define a directive and set its selector.

Use ElementRef to access the element and Renderer2 to safely change its style or content.

Examples

This directive makes the text bold by setting the font weight style.

Angular

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

@Directive({ selector: '[appBold]' })
export class BoldDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'font-weight', 'bold');
  }
}

This directive changes the text color between green and red each time you click the element.

Angular

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

@Directive({ selector: '[appToggle]' })
export class ToggleDirective {
  private isOn = false;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click') toggle() {
    this.isOn = !this.isOn;
    const color = this.isOn ? 'green' : 'red';
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }
}

Sample Program

This example shows a directive that highlights the background of a heading when you move the mouse over it and removes the highlight when the mouse leaves.

Angular

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

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

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'background-color');
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HighlightDirective],
  template: `<h2 appHighlight>Hover over me to see highlight</h2>`
})
export class AppComponent {}

Important Notes

Always use Renderer2 for DOM changes to keep your app safe and compatible with different platforms.

Use @HostListener to listen to events like clicks or mouse movements on the element.

Directives should be simple and focused on one task for easier reuse and testing.

Summary

Directives let you add or change behavior on HTML elements.

Use ElementRef and Renderer2 to safely manipulate the DOM.

Listen to user events with @HostListener to react to actions like clicks or hovers.