Angular directive to change background color of an element

Here is an illustration of a special directive that alters an element’s background color when the mouse hovers over it:

Use the @Directive decorator to declare the directive’s selector in a new file that you create for it. Take the terminal to the folder where you want to add the directive. Use the following command to add your directive:

 ng g directive change-background-color-on-hover 

The ng g directive command is used to generate new directives in Angular using the Angular CLI. The next argument is the type of file to generate, in this case “directive”. The last argument is the name of the directive, in this case “change-background-color-on-hover”. This will create a new file for the directive with the following code:

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

@Directive({
  selector: '[appChangeBackgroundColorOnHover]'
})
export class ChangeBackgroundColorOnHoverDirective {

  constructor() { }
}

Modify the code to this to add color change logic:

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

@Directive({
  selector: '[appChangeBackgroundColorOnHover]'
})
export class ChangeBackgroundColorOnHoverDirective {
  constructor(private elementRef: ElementRef) {}

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

  @HostListener('mouseleave') onMouseLeave() {
    this.changeColor('unset');
  }

  private changeColor(color: string) {
    this.elementRef.nativeElement.style.backgroundColor = color;
  }
}

The appChangeBackgroundColorOnHover directive changes an element’s background color when the user hovers over it with their mouse. The directive is applied to an element using the selector appChangeBackgroundColorOnHover. The @Directive decorator is used to create a new directive, and the selector property defines the selector that will be used to apply the directive to an element.

The directive’s constructor takes an ElementRef as an argument. This is a built-in service provided by Angular, which allows you to access the DOM element to which you apply the directive.

The directive uses the @HostListener decorator to listen for the mouseenter and mouseleave events on the host element, and invokes the onMouseEnter and onMouseLeave methods when these events occur. These methods call the private changeColor method and pass in the color to apply to the background color of the host element. The changeColor method then sets the background color of the host element to this color. The mouseleave method sets it back to unset so that it will fallback to any parent element’s css if no color value is specified.

In the @NgModule decorator of the module where the directive will be used, add the directive to the declarations array.

import { ChangeBackgroundColorOnHoverDirective } from './change-background-color-on-hover.directive';

@NgModule({
  declarations: [ChangeBackgroundColorOnHoverDirective],
  imports...
  providers...  
})
export class AppModule { }

Add the directive’s selector as an attribute to an element to use it in a template.

<div appChangeBackgroundColorOnHover>This element's background will change to orange on hover</div>

In this example, the directive accesses the element to which it is applied and listens for mouse events using the ElementRef and HostListener services. When the mouse enters or leaves an element, the onMouseEnter and onMouseLeave methods are used to alter the element’s background color.