Creating Custom Directives in Angular

1. Introduction

Angular provides a powerful way to create reusable components using custom directives. Directives are a core part of Angular's architecture, allowing developers to create custom behaviors and extend HTML capabilities.

2. Types of Directives

2.1 Overview

**Components**: Directives with a template.
**Structural Directives**: Change the DOM layout by adding/removing elements (e.g., *ngIf, *ngFor).
**Attribute Directives**: Change the appearance or behavior of an element (e.g., ngClass, ngStyle).

3. Creating a Custom Directive

Follow these steps to create a custom attribute directive.

3.1 Step-by-step Process

Step 1: Generate the Directive

ng generate directive highlight

This command creates a new directive file and updates the module automatically.

Step 2: Implement the Directive Logic

Edit the generated directive file (highlight.directive.ts) to implement the desired behavior:


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.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

3.2 Using the Directive

To use the directive, simply add the attribute to any HTML element in your component template:

<div appHighlight>Hover over me!</div>

4. Best Practices

Use meaningful names for your directives.
Keep directive logic simple and focused.
Make use of @Input and @Output for data binding.

5. FAQ

What is a directive in Angular?

A directive is a class that adds behavior to elements in your Angular applications.

Can I create multiple directives in a single file?

Yes, but it's recommended to keep directives in separate files for better maintainability.