height="256px" width="256px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/angular-material-extensions-logo.svg">

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


src="https://raw.githubusercontent.com/anthonynahas/ngx-long-press2/HEAD/assets/v1.0.0/demo.gif">

Built by and for developers :heart:

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 :star: and sharing it :loudspeaker:

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
``shell
npm i -s ngx-long-press2
`




$3


`typescript
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 | - | emits when the minTime is exceeded
| onLongPressing | Output() | EventEmitter | - | emits when the user is pressing and the time lapsed in ms will be emitted
| onReleasePressing | Output() | EventEmitter | - | emits when the maxTime is exceeded or touchend, mouseup and mouseleave haven been emitted




Usage

`html
ngxLongPress2
[color]="this.timeLapsed1 > 1000? 'primary' : 'warn'"
(onLongPress)="onLongPress()"
(onLongPressing)="onLongPressing($event)"
(onReleasePressing)="onReleasePressing()">
{{ this.timeLapsed1 > 0 ? this.timeLapsed1 + ' ms' : 'PRESS ME'}}

`


src="https://raw.githubusercontent.com/anthonynahas/ngx-long-press2/HEAD/assets/v1.0.0/demo_full2.png">


`html

`

images




$3


Build the library

`bash
$ npm run build:lib
`

Serve the demo app

`bash
$ 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 :heart: we will help you :punch:

---

---

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

---

!jetbrains logo

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)

height="92px" width="92px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-country@master/assets/badge_made-in-germany.svg">