Angular Passive Event Listeners

Question

It is quite stunning how the Internet is empty regarding this topic how to make an event listener passive in Angular.

I have a dropdown menu which, when scrolled on, throws an error in Chrome: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive....

Google's motivation behind throwing this error and the problem itself is quite clear to me, and I know the solution. I need to make something like this work in my Angular code: document.addEventListener('wheel', (e) => { e.preventDefault() }, { passive: false }); But it seems the solution is harder to implement than I imagined. Angular does not have a means of setting an event listener to {passive: false}, and the vanilla JS I pasted above simply does not work.

Has anybody come across a similar problem/solution? Maybe there is a workaround? Any related information could be valuable, thanks.

Answer 1

As specified in https://angular.io/guide/event-binding#binding-to-passive-events:

(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];

can be added in the polyfills, which will make the event listeners for the scroll event passive