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'])
onm ousewheel(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 >
<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?
CodePudding user response:
'mousewheel' is deprecated. Use 'wheel' instead. Here is a list of HTML DOM events: https://www.w3schools.com/jsref/dom_obj_event.asp