I have a custom Directive which puts a class when the mouse hovers an element :

@Directive({
  selector: '[hover-class]'
})
export class HoverClassDirective {

    @Input('hover-class') hoverClass: any;

  constructor(public elementRef: ElementRef) { }

    @HostListener('mouseenter') onMouseEnter() {
        this.elementRef.nativeElement.classList.add(this.hoverClass);
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.elementRef.nativeElement.classList.remove(this.hoverClass);
    }
}

And I can put it on an element (typically a div), it works fine.

On a particular div, I have a [ngClass] which sets a class on some condition. This also works fine.

But I can't combine both my custom directive and [ngClass], in that case, only the custom directive works :

<div class="border-0" (contextmenu)="onRightClick($event)" (dblclick)="toggleState()" (click)="select()" [ngClass]="selected?'bg-primary-subtle':''" hover-class="bg-primary-subtle">

what am I missing here ?

Thank you :)

I have a custom Directive which puts a class when the mouse hovers an element :

@Directive({
  selector: '[hover-class]'
})
export class HoverClassDirective {

    @Input('hover-class') hoverClass: any;

  constructor(public elementRef: ElementRef) { }

    @HostListener('mouseenter') onMouseEnter() {
        this.elementRef.nativeElement.classList.add(this.hoverClass);
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.elementRef.nativeElement.classList.remove(this.hoverClass);
    }
}

And I can put it on an element (typically a div), it works fine.

On a particular div, I have a [ngClass] which sets a class on some condition. This also works fine.

But I can't combine both my custom directive and [ngClass], in that case, only the custom directive works :

<div class="border-0" (contextmenu)="onRightClick($event)" (dblclick)="toggleState()" (click)="select()" [ngClass]="selected?'bg-primary-subtle':''" hover-class="bg-primary-subtle">

what am I missing here ?

Thank you :)

• html
• css
• angular
• angular-directive
• angular2-hostbinding

• Are you sure you import the HoverClassDirective? Rememeber that if your component is standalone you import it in the imports array of the component, if you're using module, you should declare in the module where the component are declared. NOTE: Your directive working in this stackblitz – Eliseo Commented Jan 30 at 10:44
• yes I am, the directive always works fine, only the [ngClass] does not work when positioned on the same div as hover-class – Sébastien Hardeman Commented Jan 30 at 12:02

1 Answer 1

You can use HostBinding to add the class the angular way, since we are using JS method, angular ngClass does not work properly.

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

@Directive({
  selector: '[hover-class]',
})
export class HoverClassDirective {
  selected = false;

  @Input() selectedExternal = false;

  @Input('hover-class') hoverClass: any;

  @HostBinding('class')
  get class() {
    return this.selected || this.selectedExternal ? this.hoverClass : '';
  }

  constructor(public elementRef: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.selected = true;
    //this.elementRef.nativeElement.classList.add(this.hoverClass);
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.selected = false;
    //this.elementRef.nativeElement.classList.remove(this.hoverClass);
  }
}

Stackblitz Demo