Creating Custom Directives

In this tutorial, we will explore one of the most powerful features of Angular called Custom Directives.

Directives are classes that add additional behavior to elements in your Angular applications. Angular comes with a set of built-in directives which offers functionality out of the box. But sometimes you might need to create your own directives to perform some custom operations, this is where Custom Directives come in.

What is a Custom Directive?

A custom directive is a user-defined directive that helps us extend the functionality of HTML elements or Angular components. Custom directives bring modularity to the applications and enhance reusability.

Types of Custom Directives

Angular recognizes three types of custom directives:

1. Attribute directives - Change the appearance or behavior of an element, component, or another directive.
2. Structural directives - Change the DOM layout by adding and removing DOM elements.
3. Components - Directives with a template.

In this tutorial, we'll focus on creating and using attribute directives and structural directives.

Creating an Attribute Directive

Let's create a basic attribute directive that changes the background color of an element.

Step 1: Create a Directive

First, create a new directive file called highlight.directive.ts. You can create this file manually or by using the Angular CLI command ng generate directive highlight.

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

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

Step 2: Add Logic to the Directive

In the highlight.directive.ts file, let's import ElementRef and Renderer2 from @angular/core and inject them into the constructor. Then, let's add a method to change the background color of the host element.

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');
  }
}

Now, whenever you apply the appHighlight attribute to an element, the directive will change the background color of the element to yellow.

Creating a Structural Directive

Now, let's create a basic structural directive that adds or removes an element from the DOM.

Step 1: Create a Directive

First, create a new directive file called unless.directive.ts. You can create this file manually or by using the Angular CLI command ng generate directive unless.

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

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

Step 2: Add Logic to the Directive

In the unless.directive.ts file, let's import Input, TemplateRef, and ViewContainerRef from @angular/core and inject them into the constructor. Then, let's add a method to add or remove the element from the DOM based on a condition.

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

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
  
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }
}

Now, you can use the appUnless structural directive in your templates to add or remove elements based on a condition.

Conclusion

In this tutorial, you learned how to create custom directives in Angular. Custom directives are a powerful feature that allows you to extend the functionality of your Angular applications. Try to create your own custom directives and see how they can enhance your apps!