Noiseless Peaceful Morning

    ngx-long-press2
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    angular-material-extensions's logo

    ngx-long-press2 - Angular Library to handle long mouse clicks event for desktop and long touch events for mobile and tablets

    npm version npm demo docs: typedoc Join the chat at https://gitter.im/angular-material-extensions/Lobby

    @angular-material-extensions/select-country demonstration

    Built by and for developers ❤️

    Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

    If you like this project, support angular-material-extensions by starring and sharing it 📢

    Table of Contents

    Demo

    View all the directives and components in action at https://anthonynahass.github.io/ngx-long-press2

    Library's directive

    • ngxLongPress2

    Dependencies

    • Angular developed and tested with 10.x

    Installation

    Install via npm.

    Install peer dependencies

    npm i -s ngx-long-press2

    Import the library

    import { NgxLongPress2Module } from 'ngx-long-press2'; 
    
    @NgModule({
      declarations: [AppComponent, ...],
      imports: [NgxLongPress2Module, ...],  
      bootstrap: [AppComponent]
    })
    export class AppModule {
    }

    Other modules in your application like for lazy loading import NgxLongPress2Module into your feature module:

    API

    option bind type default description
    minTime Input() number 500 the minimum time to fire onLongPress event (in ms)
    maxTime Input() number 2000 the maximum time to fire onReleasePressing event (in ms)
    onLongPress Output() EventEmitter<void> - emits when the minTime is exceeded
    onLongPressing Output() EventEmitter<number> - emits when the user is pressing and the time lapsed in ms will be emitted
    onReleasePressing Output() EventEmitter<void> - emits when the maxTime is exceeded or touchend, mouseup and mouseleave haven been emitted

    Usage

      <button mat-raised-button
              ngxLongPress2
              [color]="this.timeLapsed1 > 1000? 'primary' : 'warn'"
              (onLongPress)="onLongPress()"
              (onLongPressing)="onLongPressing($event)"
              (onReleasePressing)="onReleasePressing()">
      {{ this.timeLapsed1 > 0 ? this.timeLapsed1 + ' ms' : 'PRESS ME'}}
    </button>

    @angular-material-extensions/select-country demonstration

    <button ngxLongPress2></button>

    images

    Run Demo App Locally after cloning the github project

    Build the library

    $ npm run build:lib

    Serve the demo app

    $ npm start

    Other Angular Libraries


    Support

    Built by and for developers ❤️ we will help you 👊


    jetbrains logo

    This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm


    License

    Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)

    angular-material-extensions's logo

    Install

    npm i ngx-long-press2

    DownloadsWeekly Downloads

    699

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    45.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • anthonynahas