Creating Custom Directives in Angular: A Step-by-Step Guide

Custom directives in Angular allow you to extend HTML with reusable behavior and functionality. Unlike components, which have templates, custom directives are used to manipulate the DOM, add behavior, or modify the appearance of elements. In this article, we’ll explore how to create custom directives in Angular, including attribute directives and structural directives. By the end of this guide, you’ll have a solid understanding of how to create and use custom directives effectively in your Angular applications.

What are Custom Directives?

Custom directives are classes that add behavior or modify the DOM in Angular applications. They are used to create reusable functionality that can be applied to multiple elements or components. Angular supports two types of custom directives:

• Attribute Directives: Modify the appearance or behavior of an element.
• Structural Directives: Change the DOM layout by adding or removing elements.

Creating a Custom Attribute Directive

Let’s walk through the process of creating a custom attribute directive that changes the background color of an element when hovered over.

Step 1: Generate the Directive

Use the Angular CLI to generate a new directive:

ng generate directive highlight

This command generates a new directive file (highlight.directive.ts) with the following structure:

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

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

Step 2: Implement the Directive

Modify the directive to change the background color of an element when it is hovered over:

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

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

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

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

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Step 3: Use the Directive

Apply the directive to an element in your template:

<p appHighlight>Hover over this text to highlight it.</p>

Creating a Custom Structural Directive

Structural directives change the DOM layout by adding or removing elements. Let’s create a custom structural directive that conditionally renders content based on a condition.

Step 1: Generate the Directive

Use the Angular CLI to generate a new directive:

ng generate directive unless

This command generates a new directive file (unless.directive.ts) with the following structure:

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

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor() {}
}

Step 2: Implement the Directive

Modify the directive to conditionally render content based on a condition:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  private hasView = false;

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}
}

Step 3: Use the Directive

Apply the directive to an element in your template:

<p *appUnless="isHidden">This content is visible unless isHidden is true.</p>

In the component class:

export class AppComponent {
  isHidden = false;
}

Secrets and Hidden Facts

• Directive Selectors: Directive selectors can be attribute-based, element-based, or class-based, depending on your needs.
• Host Binding: Use the @HostBinding decorator to bind a directive property to a host element property.
• Host Listeners: Use the @HostListener decorator to listen for events on the host element.

Conclusion

Custom directives are a powerful way to extend HTML with reusable behavior and functionality in Angular applications. By creating custom attribute directives and structural directives, you can add dynamic behavior, manipulate the DOM, and create reusable components. Whether you’re building a simple UI or a complex application, custom directives are an essential tool for Angular development.

So, start experimenting with custom directives in your projects and unlock the full potential of Angular!