Angular Event Filters
@tinkoff/ng-event-filters is a tiny (1KB gzip) library for optimizing change detection cycles for performance sensitive events (such as touchmove, scroll, drag etc.) and declarative preventDefault() and stopPropagation().
How to use
Add new providers to your app module:;; // <-- THIS
Use new modifiers for events in templates and in
.stopto call stopPropagation() on event
.preventto call preventDefault() on event
.silentto call event handler outside Angular's
For example:Clicking on this DIV will not move focusClicks on this DIV will not bubble upCallbacks to mousemove will not trigger change detection
You can also re-enter
NgZoneand trigger change detection, using
Scrolling this DIV will only trigger change detection and onScroll callback if it isscrolled to bottom
;// ...onScroll_element: HTMLElement
All examples above work the same when used with
Filter function will be called with the same arguments as the decorated method. Decorated method will be called and change detection triggered if filter function returns
Filter function must be exported named function for AOT, arrow functions will trigger build error.
.silentmodifier will not work with built-in keyboard pseudo-events, such as
keydown.arrowDownsince Angular re-enters
NgZoneinside internal handlers.
Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.