How to implements @HostListener with event mouseenter in input on Angular 10?-CodePudding

I'm trying to implement @HostListener in my project Angular 10, but it doesn't work.

Follow my code below:

home.ts

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

export class EnumComponent {

@Directive({ selector: 'input[ListManual]'})


@HostListener('mouseenter', ['$event.target']) onClick() {
    console.log("hereeee")
    //this.newTypeButtonClick(); 
  }

}

home.html

<ng-template pTemplate="body" let-data>
    <tr>
      <td>
        <input
             ...
          ListManual
        />
      </td>
      <td>
        <input
             ...
          ListManual
        />
      </td>
      <td>
        <input
             ...
          ListManual
        />
      </td>
    </tr>
</ng-template>

I want it does work when I click on input and show me log.

Any help will be appreciated.

CodePudding user response：

Can we assume you have registered the directive in a module and you've verified it's being interpolated? Maybe place a console statement in the constructor of your directive?

CodePudding user response：

Your syntax is off. Try the following:

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

@Directive({ selector: 'input[ListManual]'})
export class EnumComponent {

  @HostListener('mouseenter', ['$event'])
  onClick(ev: MouseEvent) {
    console.log("hereeee")
    //this.newTypeButtonClick(); 
  }
}