I have a directive which on hovering over the element adds an overlay on that element. Now the each class in the dynamically added element has 5 to 8 properties each so i dont want to perform like add hostbinding or setStyle on the element using Renderer2. I have added the added the classes in the component on which the directive will take place but it is still not applying the class properties.

**
Problem: I don’t want to perform HostBinding or setStyle on the directive(as if I ever need to change any property I would have to change this on the .ts file and I want the CSS and Typescript code separate) and I also don’t want to add the classes used in the directive in each components .css file as there will be a lot of copy and paste on which this hover should work and I just want to add the directive like appHoverEdit on the element and not need to add the css class in each component. Is there like a styleURL property which I can add to the directive itself(I have seen the other post of using host).
**

I am able to add the classes to the main .css file styles.css and the classes are taking effect but I want to add the classes to that particular directive and not the entire app.
If there is a better solution please let me know and if I have made a mistake.

The directive is down below

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

@Directive({
  selector: '[appHoverEdit]'
})
export class HoverEditDirective implements OnInit {
  edit = this.renderer.createElement('div');
  
  @HostListener('mouseenter') onmouseover(event: Event){
    this.renderer.appendChild(this.element.nativeElement, this.edit)
  }
  @HostListener('mouseleave') onnmouseleave(event:Event){
    this.renderer.removeChild(this.element.nativeElement, this.edit, false)
  }

  constructor(private element: ElementRef,
    private renderer: Renderer2
  ) {}
    
  ngOnInit(){
    this.edit.innerHTML = `
      <div class="edit-schedule flex">
        <div class="h2">Edit</div>
        <div class="i-edit-container">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22 36.6667H38.5M5.5 36.6667H8.57C9.46683 36.6667 9.91524 36.6667 10.3372 36.5654C10.7114 36.4755 11.069 36.3274 11.3971 36.1264C11.7671 35.8996 12.0842 35.5825 12.7184 34.9484L35.75 11.9167C37.2688 10.3979 37.2688 7.93546 35.75 6.41667C34.2313 4.89789 31.7688 4.89789 30.25 6.41667L7.21831 29.4484C6.58415 30.0825 6.26707 30.3996 6.04032 30.7696C5.83928 31.0977 5.69113 31.4554 5.60131 31.8295C5.5 32.2515 5.5 32.6999 5.5 33.5967V36.6667Z" stroke="black" stroke-width="3.66667" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>`;
  }
}