1.0.1 • Published 6 years ago

ng2-debounce-directive v1.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

@ng2-debounce-direcive

Angular 2 directive to add debounce behaviour on elements based in a list of events

Installation

To install this library, run:

$ npm install ng2-debounce-directive --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install ng2-debounce-directive

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Import your library
import { Debounce } from 'ng2-debounce-directive';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    Debounce.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<input appDebounce [delay]="700" [events]="['keyup','mouseover',...]" (func)="some_binding_method()" [(ngModel)]="attribute">

Tested events

Event nameDescription
clickFires on a mouse click on the element
dblclickFires on a mouse double-click on the element
mousedownFires when a mouse button is pressed down on an element
mousemoveFires when the mouse pointer is moving while it is over an element
mouseoutFires when the mouse pointer moves out of an element
mouseoverFires when the mouse pointer moves over an element
mouseupFires when a mouse button is released over an element
wheelFires when the mouse wheel rolls up or down over an element
keydownFires when a user is pressing a key
keypressFires when a user presses a key
keyupFires when a user releases a key

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Jonathas