Creating Custom Structural & Attribute Directives in Angular

Introduction:

Directives are a powerful feature in Angular that allow you to extend HTML with custom behaviors and functionality. In this blog post, we will explore how to create custom structural and attribute directives in Angular. We’ll cover the concepts, explain the differences between structural and attribute directives, and provide practical examples to demonstrate their usage.

If you want to learn about a new feature of angular, you can refer here.

Understanding Directives in Angular:

The directive is Angular’s way of manipulating the DOM, adding custom behavior, and enhancing the functionality of HTML elements. There are two main types of directives: structural and attribute directives.

Structural Directive:

Structural directives modify the structure of the DOM by adding or removing elements. They are denoted by an asterisk (*) prefix in the HTML template. Let’s create a custom structural directive called MyIfDirective that conditionally renders an element based on a boolean expression.

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

@Directive({
  selector: '[myIf]'
})
export class MyIfDirective {
  @Input() set myIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

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

In the HTML template, you can now use the *myIf directive to conditionally render an element:

<div *myIf="isVisible">Visible only when isVisible is true</div>

Attribute Directive:

Attribute directives modify the behavior or appearance of existing elements. They are applied as attributes to HTML elements. Let’s create a custom attribute directive called MyHighlightDirective that changes the background color of an element when it hovers.

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

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

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

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

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

Now, you can apply the myHighlight directive to any element in the HTML template:

<p myHighlight>Hover over me to see the highlight effect</p>

Creating Custom Directive:

To create a custom directive in Angular, you need to use the @Directive decorator and define the selector and corresponding logic.

Directive Metadata:

The @Directive decorator allows you to specify metadata for your directive, such as the selector and any inputs, outputs, or host bindings/listeners.

Directive Logic:

Inside the directive class, you can define the behavior and functionality of the directive. This may include manipulating the DOM, interacting with the element, or communicating with other components.

Directive Lifecycles:

A directive has its own lifecycle hooks that you can use to perform certain actions at specific points in the directive’s lifecycle. Some commonly used lifecycle hooks include ngOnInit, ngOnChanges, and ngOnDestroy.

Conclusion:

Creating custom structural and attribute directives in Angular empowers you to extend the capabilities of HTML and enhance the behavior of your application. By understanding the differences between structural and attribute directives, and by following the examples provided in this blog post, you can create custom directives tailored to your specific needs. Experiment with the directive to create reusable and flexible components that bring additional functionality and interactivity to your Angular applications.

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.