Ionic 2 - setting callback for "long press" event directive

Question

I am trying to add a custom longPress event directive on elements, since (press)="callback_function()" will result in ion-list won't be able to scroll anymore. Bug or not, i've found out that I need to add a custom gesture directive that would add support for a new attribute, in this case I call it longPress. and it works great, except I don't get how to add the callback function :-)

I've followed a tutorial (http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/)

The "press-directive" is created in src/components/press-directive/press-directive.js and looks like this:

import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

/**
 * Generated class for the PressDirective directive.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
 * for more info on Angular Directives.
 */

@Directive({
  selector: '[longPress]' // Attribute selector
})


export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;

  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }

  public theCallback() {

  }

  ngOnInit() {
    this.pressGesture = new Gesture(this.el);
    this.pressGesture.listen();

    // instead of this..
    this.pressGesture.on('press', (event) => {
      console.log('pressed!!');
    });

    // i want the callback to come from the template like this:
    // <ion-col (longPress)="showActionSheet(object)">
  }

  ngOnDestroy() {
    this.pressGesture.destroy();
  }
}

In home.module.ts I have added the directive in an import:

import { PressDirective } from "../../components/press-directive/press-directive";

and I've added it in the declaration:

declarations: [
  Home,
  PressDirective
],

In home.html, I implement it in a like this:

<ion-col (longPress)="showActionSheet(relevantObject)">...

I've cut out most of the unimportant stuff :-)

And when I do a long press, it will return the following:

console.log('pressed!!');

But I can't get my head wrapped around how to support the actual callback function from the template element.

Any help or hint would be appreciated..

score 5 · Answer 1 · edited May 23 '17 at 12:02

For anyone who still has this problem, I ran into a very similar thing, and Steen's answer was very helpful in figuring out adding a callback.

However, I wanted to add a little clarification, because I think the distinction between "press" and "release" (or "pressup") should be made.

According to HammerJS docs (which ionic uses for Gestures), there is a "press" event, and also a "pressup" event, which is fired when the press is released.

You can actually include an @Output for each event (press and pressup):

/*
 * The first output will emit when the timeout is reached for press,
 * and the second will emit when the press gesture is released.
 */ 

@Output('long-press') onPress: EventEmitter<any> = new EventEmitter();
@Output('long-press-up') onPressUp: EventEmitter<any> = new EventEmitter();

Then, in the @ngOnInit, respond to each event with each respective emitter:**

this.pressGesture.on('press', (event) => {
  this.onPress.emit(event);
});

this.pressGesture.on('pressup', (event) => {
  this.onPressUp.emit(event);
});

This way, you can support a separate callback function for each gesture event (in the template/component):

<ion-col (long-press)="longPressed(object)" (long-press-up)="longPressReleased(object)">
  ...
</ion-col>

Hopefully that adds some info/clarity.

Hi I have a question on the selector syntax.. I tried adding 2 selectors in the same directive, but it doesn't works, How do we do it for both long-press and long-press-up in the same directive. thanks in advance. — sur, May 12 '17 at 10:10
@sur I believe that you can only have one selector, but you can have 2 `Output` or `EventEmitters` (or as many as the number of gestures you want to respond to). This will let you bind to both events. I wrote a post about this [here](https://tyguy.github.io/2017/04/26/custom-gestures-in-ionic-2.html), and [here is a gist](https://gist.github.com/TyGuy/2f45c56fc5df07db7683bd5725c5fb4c). Is that what you are asking? — tyguy, May 12 '17 at 19:15

score 3 · Accepted Answer · answered Apr 23 '17 at 20:19

Alright, so I was gently informed of the solution on the awesome ionic slack chat site (https://ionic-worldwide.slack.com) - I needed to use Output and EventEmitter

In the Import section, it had to look like this:

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { Gesture } from "ionic-angular/gestures/gesture";

In the class, I had to add an @Output EventEmitter:

export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;
  @Output('long-press') onPressRelease: EventEmitter<any> = new EventEmitter();

And the on('press',...) inside ngOnInit had to look like this:

this.pressGesture.on('press', (event) => {
  this.onPressRelease.emit('released');
});

Now the template supports adding (long-press)="showActionSheet(object)":

<ion-col (long-press)="showActionSheet(object)">

And yes, I also changed it from longPress to long-press.. just looked better for me..

how to handle your release event? – Khaled Ramadan Mar 11 '18 at 09:13 — Khaled Ramadan, Mar 11 '18 at 09:13

score 0 · Answer 3 · answered May 06 '19 at 07:04

0

I was able to resolve this issue in Ionic v4 by providing HAMMER_GESTURE_CONFIG in app module. Follow this link for the solution: Vertical scroll is not working with HammerJS and Angular2

answered May 06 '19 at 07:04

Syed Arshad

106
1
8

Ionic 2 - setting callback for "long press" event directive

3 Answers3

Linked