@HostBinding in Angular | Directives | Angular 15+

The @HostBinding decorator binds a host element property to a variable in a directive or a component.

1. goto app\custom_directives run terminal and below command

ng generate directive betterhighlight

open file app\custom_directives\betterhighlight.directive.ts

import { Directive, ElementRef, Renderer2,HostBinding } from '@angular/core';
@Directive({
  selector: '[appBetterhighlight]'
})
export class BetterhighlightDirective {

  constructor(private element: ElementRef,private render: Renderer2) { }
  @HostBinding('style.backgroundColor') background:string = 'yellow';
}

In view

<divappOnhoverColorWhite>
  This is a cool
</div>