Estoy tratando de usar la directiva de la rueda del mouse. Esta es mi primera directiva, y no puedo hacer que funcione. Esta es la directiva:

 import { Directive, ElementRef, HostListener } from "@angular/core"; @Directive({ selector: '[wheel]' }) export class MouseWheelDirective { constructor(private el: ElementRef) { console.log("directive was created"); } @HostListener('mousewheel', ['$event']) onMousewheel(event) { console.log("event"); if (event.wheelDelta > 0) { console.log("wheel 0"); } if (event.wheelDelta < 0) { console.log("wheel 1"); } } }

Y así es como lo uso:

 <div #htmlDiv wheel class="data-table"> <table mat-table [dataSource]="dataSource"> ... </table> </div>

Registré la directiva en NgModule:

 @NgModule({ declarations: [ ... MouseWheelDirective ], imports: [ ... ], exports: [ ... MouseWheelDirective ] })

En la consola veo directive was created . Pero no veo ningún mensaje cuando desplazo la rueda del mouse en mi mesa. ¿Alguien podría decir cómo solucionarlo?