Can we create a custom directive in Angular

Question

With the help of code and example tell me Can we create a custom directive in Angular?

Answer 1

You can create a custom directive in Angular using the @Directive decorator.

Example: Custom Highlight Directive

1. Create the Directive (highlight.directive.ts)

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

@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {

    this.el.nativeElement.style.backgroundColor = 'yellow';

  }

  @HostListener('mouseleave') onMouseLeave() {

    this.el.nativeElement.style.backgroundColor = 'transparent';

  }

}

2. Use in a Component

<p appHighlight>Hover over me to highlight!</p>