Binding Directive Properties | change elements color dynamically| Angular 15+

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, Input } from '@angular/core';
@Directive({
  selector: '[appBackgroundColorChanger]'
})
export class BackgroundColorChangerDirective {
  @Input() coloris:string = "Green";
  constructor(private element: ElementRef,private render: Renderer2) { }
  @HostBinding('style.backgroundColor') background:string = this.coloris;
  ngOnInit(){
    this.background = this.coloris;
  }
}

In view

<p appBackgroundColorChanger [coloris]="'red'">home works!</p>