Angular Advanced Directives: Understanding how to create custom directives and how to manipulate the DOM with Renderer2

In Angular, directives are used to extend the functionality of elements in the DOM. Advanced directives in Angular typically refer to custom directives, which are created by the developer to meet specific requirements. Custom directives can be used to create reusable behavior or to extend the functionality of existing elements.

To create a custom directive, you can use the @Directive decorator, which is provided by the Angular core library. The decorator is used to configure the directive by providing metadata about the directive, such as its selector, template, and host bindings.

Here is an example of how to create a custom directive that highlights the text when the mouse enters the element:

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

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

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.addClass(this.el.nativeElement, 'highlight');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeClass(this.el.nativeElement, 'highlight');
  }
}

In this example, the directive uses the @Directive decorator to define the directive and its selector. The constructor of the directive takes two dependencies, ElementRef and Renderer2, which are used to manipulate the DOM. The @HostListener decorator is used to listen for the 'mouseenter' and 'mouseleave' events on the element and add or remove the 'highlight' class accordingly.

The ElementRef service is used to get the native element from the directive, and the Renderer2 service is used to manipulate the element in the DOM. The Renderer2 service provides a way to manipulate the DOM in a way that is safe and efficient. It can be used to change the element's styles, add or remove classes, add or remove attributes, and add or remove elements from the DOM.

You can use this directive in your template like this :

<p appHighlight>This text will be highlighted when mouse over</p>

Here is an another example of how to create a custom directive that will resize the element when clicked:

@Directive({
  selector: '[appResize]'
})
export class ResizeDirective {
  @HostBinding('style.width') width: string;
  @HostListener('click') onClick() {
    this.width = '200px';
  }
}

In this example, the directive uses the @HostBinding decorator to bind the width style property of the element to a property in the directive's class. The @HostListener decorator is used to listen for the 'click' event on the element and change the width of the element to 200px.

You can use this directive in your template like this :

<div appResize>This element will be resized when clicked</div>

As you can see in these examples, custom directives can be used to add custom behavior to an element, change the appearance of an element, or create new elements. Custom directives can be used to create reusable behavior or to extend the functionality of existing elements. This way you can keep your code organized and maintainable.

It is important to note that manipulating the DOM directly is not always the best practice, as it can lead to poor performance and hard-to-debug issues. Angular provides a way to manipulate the DOM through the Renderer2 service, which provides a safe, efficient, and platform-agnostic way to manipulate the DOM.

Also there are three types of directives: components, structural directives and attribute directives.

• Components are directives with a template, and they are used to create reusable UI elements.
• Structural directives are used to change the structure of the DOM by adding or removing elements.
• Attribute directives are used to change the appearance or behavior of an element.

When creating custom directives, you can use the @Directive decorator to configure the directive and provide metadata such as its selector, template and host bindings.

In addition to creating custom directives, you can also use the Renderer2 service to manipulate the DOM. The Renderer2 service provides a way to manipulate the DOM in a safe, efficient, and platform-agnostic way. This service can be used to change the element’s styles, add or remove classes, add or remove attributes, and add or remove elements from the DOM.

When creating custom directives, it is important to keep in mind that manipulating the DOM directly can lead to poor performance and hard-to-debug issues. It is often better to use the Renderer2 service to manipulate the DOM, as it provides a safe and efficient way to do so.

It is also important to note that, Custom directives can be used in combination with other Angular features such as services, pipes, and forms. With the combination of these features, custom directives can be used to solve complex problems and create powerful and reusable components.

I hope this article help you understand how to create custom directives and how to manipulate the DOM with Renderer2 in Angular.

Learn more on Advanced Pipes — Link