Disable mouse wheel scroll on <input type=”number”> Angular

Balram Chavan
1 min readAug 21, 2023

The native <input type="number"> element will update values upwards and downwards when you use mouse wheel scroll. Though it might be a desired user experience, sometimes you will find in a situation where a user is scrolling the page, and instead it updates the <input> value.

If you would like to stop the value updates on the mouse wheel scroll, then you would have to create a custom Angular Directive with @HostListener.

nxNoScroll Directive

  • Create a new Angular…