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 theNgModule
.
ng generate @schematics/angular:directive @components/nx-no-scroll --standalone
- Add the below code in your newly created directive. Here
@HostListener
listens toonWheel
event on the<input>
element and stops the event to be passed to the element by callingevent.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!