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;
}
}
}
Button background color is changing but i want to change the color of the text also on button on hover otherwise default color will be there.
Any solution thant