html - Custom directive and [ngClass] on same element does not work - Stack Overflow

admin管理员组

文章数量:1315377

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

Share Improve this question Follow edited Jan 31 at 10:13 Naren Murali 58.8k55 gold badges4444 silver badges7777 bronze badges asked Jan 30 at 9:52 Sébastien HardemanSébastien Hardeman 3344 bronze badges 2

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签： htmlCustom directive and ngClass on same element does not workStack Overflow