Angular Directive - Change color of button on hover

I have this button:

<button class="btn-submit" type="button" appControlhover
[defaultColor]="btnBackgroundColor"
[highlightColor]="btnhoverColor"
[btnhovertxtcolor]="btnColor"
style="margin-top: 20px"
(click)="Submit()">
Send
</button>


ts code

btnBackgroundColor='#28e979';
btnhoverColor='#a6dabb';
btnhovertxtcolor='#848f90';


Custom Directive:

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

@Directive({
selector: '[appControlhover]'
})
export class ControlhoverDirective implements OnChanges {

@Input() defaultColor: string;
@Input() highlightColor: string;
@Input() isValid: boolean = true;
@HostBinding('style.backgroundColor') backgroundColor: string;
@HostBinding('style.color') btnhovercolor: string;

constructor() { }
ngOnInit() {

if (this.highlightColor != 'none') {
this.backgroundColor = this.defaultColor;
} else if (this.highlightColor == 'none') {
this.backgroundColor = this.defaultColor;
} else {
this.backgroundColor = this.defaultColor;
}
}

@HostListener('mouseenter') mouseover(eventData: Event) {
if (this.highlightColor != 'none') {
this.backgroundColor = this.highlightColor;
this.btncolor ='#28e979';
} else if (this.highlightColor == 'none') {
this.backgroundColor = this.defaultColor;
} else {
this.backgroundColor = this.defaultColor;
}
}

@HostListener('mouseleave') mouseleave(eventData: Event) {

if (this.highlightColor != 'none') {
this.backgroundColor = this.defaultColor;
} else if(this.highlightColor == 'none') {
this.backgroundColor = this.defaultColor;
} else {
this.backgroundColor = this.defaultColor;
}
}
}


The button background color is changing but I also want to change the text color on the button on hover otherwise set with the default color.

Any solution thanks.

Continue reading...