I am trying to use mouse wheel directive. This is my first directive, and I can't make it work. This is the directive:

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");
    }
  }
}

And this is how I use it:

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

I registered directive in NgModule:

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

In console I see directive was created. But I don't see any messages when I'm scrolling mouse wheel on my table. Could anyone say how to fix it?