# What a Custom Directive is in Angular ?

Paul Tomoiu

●

Angular,

frontend,

web

●

Published 2024-01-06

This tutorial explains to you what a custom directive is in Angular and also provide you with an example.

In Angular, custom directives are used to extend the functionality of HTML elements. You can create custom directives to encapsulate and reuse behavior throughout your application. Here's a simple example of creating a custom directive that changes the background color of an element when the user hovers over it.

# Create a new directive:

// hover-highlight.directive.ts
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHoverHighlight]'
})
export class HoverHighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow'); // Change the color to yellow on mouse enter
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null); // Remove the highlight on mouse leave
  }

  private highlight(color: string | null) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', color);
  }
}

In this example:

@Directive({ selector: '[appHoverHighlight]' }) : The @Directive decorator defines the selector for the directive. It specifies that the directive can be used with elements having the attribute appHoverHighlight.
constructor(private el: ElementRef, private renderer: Renderer2) : The constructor injects ElementRef and Renderer2. ElementRef provides direct access to the host element, and Renderer2 is used for safely manipulating the DOM.
@HostListener('mouseenter') onMouseEnter() and @HostListener('mouseleave') onMouseLeave() : These decorators define event listeners for the mouseenter and mouseleave events on the host element.
private highlight(color: string | null) : This private method is responsible for applying the highlight by setting the background color using the Renderer2.

# Use the custom directive in a component

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div appHoverHighlight>
      Hover over me to see the highlight!
    </div>
  `,
  styles: []
})
export class AppComponent {}

In this component, we're using the appHoverHighlight directive on a div element. When you hover over the div, the background color will change to yellow, and it will revert to its original color when you move the mouse away.

# Include the directive in your module

Make sure to include the custom directive in the declarations array of your Angular module.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HoverHighlightDirective } from './hover-highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HoverHighlightDirective
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now, when you run your Angular application, the specified element will exhibit the highlighting behavior when hovered over, thanks to the custom directive.