Is there a way to utilize NgClass within a custom attribute directive to modify the CSS class of the main elements?
For example, if I have this code snippet:
@Component({
selector: 'my-app',
template: `
<div>
<div class="box" myDir [ngClass]="{'blue': blue, 'red': red}"> </div>
</div>
`,
});
And then, within the myDir directive, something like this:
import { Directive, HostListener, OnInit } from '@angular/core';
@Directive({
selector: '[myDir]'
})
export class MyDirDirective {
blue: boolean;
red: boolean;
constructor() {
}
ngOnInit() {
}
@HostListener('mouseenter', ['$event'])
onMouseEnter(event) {
event.preventDefault();
event.stopPropagation();
this.blue = true;
this.red = false;
console.log('mouseenter');
}
@HostListener('mouseleave', ['$event'])
onMouseLeave(event) {
event.preventDefault();
event.stopPropagation();
this.blue = true;
this.red = false;
console.log('mouseleave');
}
Do I have access to the scope where blue and red are located? While I can update these values with a button toggle, it seems like modifying them within the directive itself is not straightforward. Is this the correct approach or is there another solution that is not covered in the documentation?