Using CSS variable for a CSS hover property in Angular directive?

January 26, 2022

I have the following directive:

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

@Directive({
  selector: 'd-btn', 
  host: {}
})

export class ButtonDirective {
    constructor(private el: ElementRef){}
    @HostListener('mouseover')
    onMouseOver() {
        this.el.nativeElement.style.transition;
        this.el.nativeElement.style.backgroundColor = "var(theme-color-1)";
    }
    
  
    @HostListener('mouseout')
    onMouseLeave() {
        this.el.nativeElement.style.transition;
        this.el.nativeElement.style.backgroundColor = 'transparent';
    }
}

If instead of "var(theme-color-1)" I write a color it adds the given color when the user hovers over the element. But I would like to give it a variable color, because I am working on different color themes. Any ideas?

>Solution :

The solution should be pretty easy and is not an Angular problem. You can solve this easily by CSS:

button[d-btn] {
  transition: all .5s;
  background: transparent; 
}
button[d-btn]:hover {
  transition: all .5s;
  background: var(--theme-color-1); 
}