Angular Event Plugins
@tinkoff/ng-event-plugins 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:
import {NgModule} from '@angular/core';
import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins';
@NgModule({
bootstrap: [
],
imports: [
],
declarations: [
],
providers: NG_EVENT_PLUGINS,
})
export class AppModule {}
-
Use new modifiers for events in templates and in @HostListener
:
.stop
to call stopPropagation() on event.prevent
to call preventDefault() on event.silent
to call event handler outside Angular's NgZone
For example:
<div (mousedown.prevent)="onMouseDown()">
Clicking on this DIV will not move focus
</div>
<div (click.stop)="onClick()">
Clicks on this DIV will not bubble up
</div>
<div (mousemove.silent)="onMouseMove()">
Callbacks to mousemove will not trigger change detection
</div>
-
You can also re-enter NgZone
and trigger change detection, using @shouldCall
decorator
that takes a predicate function as argument:
<div (scroll.silent)="onScroll($event.currentTarget)">
Scrolling this DIV will only trigger change detection and onScroll callback if it is
scrolled to bottom
</div>
import {HostListener} from '@angular/core';
import {shouldCall} from '@tinkoff/ng-event-plugins';
export function scrollFilter(element: HTMLElement): boolean {
return element.scrollTop === element.scrollHeight - element.clientHeight;
}
@shouldCall(scrollFilter)
@HostListener('init.onScroll', ['$event'])
onScroll(_element: HTMLElement) {
this.someService.requestMoreData();
}
IMPORTANT You must couple @shouldCall
with @HostListener
for init
event
as shown above until Angular 10 and @tinkoff/ng-event-plugins v.2.0 are released
All examples above work the same when used with @HostListener
and CustomEvent
Important notes
-
Predicate is called with the same arguments as the decorated method and
in the context of class instance (has access to this
)
-
Decorated method will be called and change detection triggered if predicate
returns true
.
-
Predicates must be exported named function for AOT, arrow
functions will trigger build error.
-
.silent
modifier will not work with built-in keyboard pseudo-events,
such as keydown.enter
or keydown.arrowDown
since Angular re-enters NgZone
inside internal handlers.
Demo
You can try this interactive demo
Open-source
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.