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

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
• Dependencies
• Installation
• API
• Usage
• Run Demo App Locally
• Other Angular Libraries
• Support
• License

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

<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

• ngx-auth-firebaseui
• ngx-linkifyjs
• @angular-material-extensions/password-strength
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/select-country
• @angular-material-extensions/link-preview
• @angular-material-extensions/fab-menu
• @angular-material-extensions/pages
• @angular-material-extensions/contacts

---

Support

• Drop an email to: Anthony Nahas
• or open an appropriate issue
• let us chat on Gitter

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

---

---

Who is using ngx-long-press2? Awesome apps?

1. Nahaus.de

Are you missing your project or you app? PR me to publish it on the README

---

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

---

License

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