TinkoffCreditSystems/ng-event-plugins


This is an Angular library for optimizing performance sensitive events and declarative preventDefault and stopPropagation

License: Apache-2.0

Language: TypeScript

Keywords: angular, events, optimization, preventdefault, stoppropagation


Angular Event Plugins

npm version npm bundle size Build Status Coverage Status angular-open-source-starter

@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

  1. Add new providers to your app module:

    import {NgModule} from '@angular/core';
    import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins'; // <-- THIS
    
    @NgModule({
        bootstrap: [
            /*...*/
        ],
        imports: [
            /*...*/
        ],
        declarations: [
            /*...*/
        ],
        providers: NG_EVENT_PLUGINS, // <-- GOES HERE
    })
    export class AppModule {}
  2. 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>
  3. 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 {shouldCall} from '@tinkoff/ng-event-plugins';

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

// ...

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

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.

Project Statistics

Sourcerank 3
Repository Size 186 KB
Stars 4
Forks 0
Watchers 7
Open issues 0
Dependencies 1,177
Contributors 1
Tags 1
Created
Last updated
Last pushed

Top Contributors See all

Alex Inkin

Packages Referencing this Repo

@tinkoff/ng-event-filters
This is a library for optimizing performance sensitive events and declarative preventDefault and ...
Latest release 1.0.0 - Published - 4 stars
@tinkoff/ng-event-plugins
This is a library for optimizing performance sensitive events and declarative preventDefault and ...
Latest release 1.0.0 - Published - 4 stars

Recent Tags See all

v1.0.0 February 18, 2020

Something wrong with this page? Make a suggestion

Last synced: 2020-02-18 12:15:36 UTC

Login to resync this repository