Angular Event Plugins


@taiga-ui/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

1. Add NG_EVENT_PLUGINS to your app providers:

``typescript
bootstrapApplication(AppComponent, {
providers: [NG_EVENT_PLUGINS],
});
`

2. Use new modifiers for events in templates and in @HostListener:
- .stop to call stopPropagation() on event
- .prevent to call preventDefault() on event
- .self to skip bubbled events
- .zoneless to call event handler outside Angular's NgZone
- .capture to listen to events in
capture phase
- .passive to add
passive event listener
- .once to remove event listener after first callback
- resize to watch for elements changing dimensions with ResizeObserver
- .debounce~ to delay the execution of the event handler for a specified time (ms or s)
- .throttle~ to limits how often the event handler can run for a specified time (ms or s)

For example:

`html


`html


`html


`html


`html
Debounced Click
Debounced Click
`

`html
Throttled Click
Throttled Click
`

3. You can also re-enter NgZone and trigger change detection, using @shouldCall decorator that takes a predicate
function as argument:

`html


`typescript
import {shouldCall} from '@taiga-ui/event-plugins';

export function scrollFilter({
scrollTop, scrollHeight, clientHeight
}: HTMLElement): boolean {
return scrollTop === scrollHeight - clientHeight;
}

// ...

@shouldCall(scrollFilter)
onScroll(_element: HTMLElement): void {
this.someService.requestMoreData();
}
`

4. Angular global events only support body, window and document. You can listen to events on any global object
with these plugins by replacing : with > symbol, for example:

`ts
@HostListener('visualViewport>resize', ['$event.target'])
onPinchZoom({ scale }: VisualViewport) {
console.log(scale)
}
`

5. iOS currently doesn't support the contextmenu event. Instead, you can use a custom longtap event. This event
captures the contextmenu event on non-iOS devices and simulates similar behavior on iOS devices.

`html


> All examples above work the same when used with @HostListener and CustomEvent

$3

- 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.

- .zoneless 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

You can also read this detailed article
explaining how this library works

Maintained

@taiga-ui/event-plugins is a part of Taiga UI libraries family which is
backed and used by a large enterprise. This means you can rely on timely support and continuous development.

License

🆓 Feel free to use our library in your commercial and private applications

All @taiga-ui/event-plugins packages are covered by Apache 2.0

Read more about this license here