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

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!