A little plugin to add long-press events to ionic components
npm install ionic4-long-presspress event that Ionic uses for long pressing, by giving you interval emission.sh
npm install --save ionic4-long-press
`
$3
step 1:
`sh
npm install --save hammerjs @types/hammerjs
`
step 2:import HammerJs in src/main.ts. i.e import 'hammerjs'; // HAMMER TIME
step 3:
Create an IonicGestureConfig.ts file in your utils folder and include this:
`ts
import {Injectable} from '@angular/core';
import {HammerGestureConfig} from '@angular/platform-browser';/**
* @hidden
* This class overrides the default Angular gesture config.
*/
@Injectable()
export class IonicGestureConfig extends HammerGestureConfig {
buildHammer(element: HTMLElement) {
const mc = new ( window).Hammer(element);
for (const eventName in this.overrides) {
if (eventName) {
mc.get(eventName).set(this.overrides[eventName]);
}
}
return mc;
}
}
`step 4:
In your app.module.ts import {IonicGestureConfig} from "../utils/IonicGestureConfig";
and add to provider:
`ts@NgModule({
imports: [
...
],
declarations: [
...,
],
providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: IonicGestureConfig}],
})
export class MyModule {
}
`$3
The directive should work on any HTML element.Import the module:
`ts
import { LongPressModule } from 'ionic4-long-press';@NgModule({
imports: [
...
LongPressModule
...
]
})
`And use in your template:
`html
`$3
| Item | Description |
|------| ---------- |
ion-long-press | Directive to include the press event outputs.
[interval] | Number. Allows you to set the interval at which the longPressed event will fire. Default 500.
(pressed) | Event fired when the element is initially pressed.
(longPressed) | Event fired on the specified interval when the element is being held.
(pressEnded)` | Event fired when the element is released.