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 directive using Angular CLI. It can be standalone directive or regular, which needs to be included in the NgModule.
ng generate @schematics/angular:directive @components/nx-no-scroll --standalone
  • Add the below code in your newly created directive. Here @HostListener listens to onWheel event on the <input> element and stops the event to be passed to the element by calling event.preventDefault() function.
import { Directive, HostListener } from '@angular/core';

@Directive({
selector: '[nxNoScroll]',
standalone: true
})
export class NoScrollDirective {

@HostListener('wheel', ['$event'])
onWheel(event: Event) {
event.preventDefault();
}

}
  • To use this directive in your component, import the directive or its module, and add nxNoScroll in the <input> element. Of course, if you have multiple <input> elements, you need to add them to all explicitly.
<input nxNoScroll type="number" [value]="entry.zone1" class="form-control" />

By the way, this directive is not restricted to <input> element only. if you put it on other HTML elements, it would stop the scrolling as well.

That’s it!

Cheers!

--

--

Balram Chavan
Balram Chavan

Written by Balram Chavan

Google Developer Expert Angular | Architect | Author | http://www.youtube.com/@angularcloud

Responses (2)