Presented here is the default directive.
import { Directive, Input, Renderer2, ElementRef } from '@angular/core';
@Directive({
selector: '[newBox]'
})
export class BoxDirective {
@Input() backgroundColor = '#fff';
constructor(private el: ElementRef, private renderer: Renderer2) {}
ngOnInit(): void {
this.renderer.setStyle(this.el.nativeElement, 'background-color', this.backgroundColor);
}
}
I am now looking to dynamically change the background color on hover using this directive. How can I achieve this?