ng generate d <directive-name>
              

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

@Directive({
  selector: '[custom-directive]',
})
export class CustomDirective {
  constructor(private ele: ElementRef) {
  }

  @HostListener('click') onClick() {
    this.el.nativeElement.style.color = 'red';
  }

  @HostListener('mouseenter') onMousemove() {
    this.ele.nativeElement.style.color ='purple';
  }
  
  @HostListener('mouseout') onMousemove() {
    this.ele.nativeElement.style.color ='black';
  }
}

in html

<b custom-directive>
  This is the tutorial for custom directive
</b>