I am facing an issue with my directive where the property color set in ngStyle is not being applied to the element. There are no errors shown by the compiler or console, and I have tried different syntaxes for ngStyle without success.
Below is the code from my app.modules file. Could there be an issue with module loading?
import { Directive, ElementRef, OnInit, Renderer2, HostListener, Input } from '@angular/core';
// custom directive which changes background color for odd and even values of index
@Directive({
selector: '[appChangecolor]'
})
export class ChangecolorDirective implements OnInit {
@Input() index: any;
color: string;
constructor(private elementRef: ElementRef, private render: Renderer2) { }
// listnes to mouseenter event of the element on which custom directive is applied and calls the function
@HostListener('mouseenter') bgColor() {
if (this.index % 2 === 0) {
// style set through Renderer2 and not by directly accessing DOM element.
this.color = 'green';
} else {
this.color = 'red';
}
console.log(this.color);
}
// listens to the mouseleave event on the element on which directive is applied
@HostListener('mouseleave') bgColorRm() {
this.color = 'black';
console.log(this.color);
}
ngOnInit() {
this.index += 1;
}
}