Angular Directive - Change color of button on hover

Question

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.

Answer 1

From your code, I think you are 90% close to the answer.

From what I amend:

1. You are missing out on the btnhovertxtcolor Input() property.

2. When the mouse enter event is triggered, you are setting the color this.btncolor = '#28e979' as default. You can replace the value with this.btnhovertxtcolor. For the rest, set the button (font) color as white or your preferred (hovered) text color.

3. When the mouse leave event is triggered, by default the button (font) color is black. So you can set it as black or you may need to define your own default color.

export class ControlhoverDirective implements OnChanges {
  @Input() defaultColor!: string;
  @Input() highlightColor!: string;
  @Input() isValid: boolean = true;
  @Input() btnhovertxtcolor!: string;
  @HostBinding('style.backgroundColor') backgroundColor!: string;
  //@HostBinding('style.color') btnhovercolor!: string;
  @HostBinding('style.color') btncolor!: string;

  constructor() {}

  ngOnChanges(changes: SimpleChanges): void {
    //throw new Error('Method not implemented.');
  }

  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';
      this.btncolor = this.btnhovertxtcolor;
    } else if (this.highlightColor == 'none') {
      this.backgroundColor = this.defaultColor;
      this.btncolor = "white"
    } else {
      this.backgroundColor = this.defaultColor;
      this.btncolor = "white"
    }
  }

  @HostListener('mouseleave') mouseleave(eventData: Event) {
    if (this.highlightColor != 'none') {
      this.backgroundColor = this.defaultColor;
      this.btncolor = 'black';
    } else if (this.highlightColor == 'none') {
      this.backgroundColor = this.defaultColor;
      this.btncolor = 'black';
    } else {
      this.backgroundColor = this.defaultColor;
      this.btncolor = 'black';
    }
  }
}

Demo @ StackBlitz