How to Create Custom Directive in Angular: Simple Guide

To create a custom directive in Angular, define a class with the @Directive decorator specifying a selector, then add behavior inside the class. Register the directive in an Angular module to use it in templates with the selector as an attribute or element.

Syntax

A custom directive in Angular is created by defining a class with the @Directive decorator. The decorator requires a selector which is the name you use in HTML to apply the directive. Inside the class, you add logic to manipulate the element or respond to events.

Example parts:

• @Directive({ selector: '[appHighlight]' }): Defines the directive and how to use it in HTML.
• Class with constructor and lifecycle hooks: Contains the behavior.

typescript

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

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

Example

This example creates a directive that changes the background color of the host element to yellow when applied.

Use the directive by adding appHighlight as an attribute to any HTML element.

typescript

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }
}

// Usage in a component template:
// <p appHighlight>This text has a yellow background.</p>

Output

The paragraph text will have a yellow background color when rendered in the browser.

Common Pitfalls

• Forgetting to declare the directive in an Angular module's declarations array causes it not to work.
• Using an invalid selector format (e.g., missing brackets for attribute selectors) will prevent Angular from recognizing the directive.
• Manipulating the DOM directly without Renderer2 can cause issues with Angular's rendering and security.

typescript

/* Wrong: Missing brackets in selector */
import { Directive } from '@angular/core';

@Directive({
  selector: 'appHighlight' // This looks for an element <appHighlight>, not an attribute
})
export class HighlightDirective {}

/* Right: Attribute selector with brackets */
import { Directive } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {}

Quick Reference

Summary tips for creating Angular custom directives:

• Use @Directive with a proper selector (attribute selectors use brackets).
• Inject ElementRef and Renderer2 to safely manipulate the DOM.
• Declare the directive in an Angular module to make it available.
• Use the directive in templates by adding the selector as an attribute.

Key Takeaways

Create a directive class with @Directive and a selector to define custom behavior.

Always declare your directive in an Angular module to use it in templates.

Use Renderer2 for safe DOM manipulation inside directives.

Attribute selectors require brackets in the selector string, e.g., '[appHighlight]'.

Apply the directive by adding its selector as an attribute to HTML elements.