Giter Club home page Giter Club logo

ngx-long-press2's Introduction

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

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

  • ngxLongPress2

  • Angular developed and tested with 16.x

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:

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

Build the library

$ npm run build:lib

Serve the demo app

$ npm start

Other Angular Libraries


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


jetbrains logo

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


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

angular-material-extensions's logo

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.