ngWheelRotate

Angular directive to parse wheel event with additional informative data and gives more controlled output.

Demo:-

Here is the working demonstration of package: https://ng-wheel-rotate-demo.vercel.app/

Installation:-

1.  Download the package from npm using: npm i ng-wheel-rotate.

2.  Add NgWheelRotateModule into your NgModule imports:

import {NgWheelRotateModule} from "ng-wheel-rotate";

@NgModule({
  ...
  imports: [ NgWheelRotateModule, ... ],
  ...
})

3.  Add ngWheelRotate on any element like this:

<div ngWheelRotate
     [debounce]="<DEBOUNCE_TIME(in milliseconds, default = 0)>"
     [delay]="<DELAY_TIME(in milliseconds, default = 0)>"
     [disabled]="<LISTEN_EVENTS_OR_NOT(boolean, default = false)>"
     [activeAxis]="<LISTEN_EVENTS_OF_SPECIFIC_AXIS(WheelRotateAxis, default = WheelRotateAxis.BOTH )>"
     (onWheelRotate)="onWheelRotate($event)">
  ...
</div>

4.  Now in your component.ts:

import {WheelRotateEvent} from "ng-wheel-rotate";
...
onWheelRotate(data: WheelRotateEvent) {
  // your logic goes here.
}

Interface:-

interface WheelRotateEvent {
  event: WheelEvent;
  direction: WheelDirection;
  source: WheelSource;
  axis: WheelRotateAxis;
}

Enums:-

enum WheelDirection {
  UP = 'UP',
  RIGHT = 'RIGHT',
  DOWN = 'DOWN',
  LEFT = 'LEFT'
}

enum WheelSource {
  TOUCHPAD = 'TOUCHPAD',
  MOUSE = 'MOUSE'
}

enum WheelRotateAxis {
  HORIZONTAL = 'HORIZONTAL',
  VERTICAL = 'VERTICAL',
  BOTH = 'BOTH'
}

Author:-

Harsh Mittal