Using Gestures Hold, Double Tap, and more in the Ionic 2 Beta

tutorials
1

So, this took a little digging through the Ionic 2 source to figure this out, and I noticed some other forum posts asking about gestures with either no answers or vague ones. Here’s how to react to any sort of gesture in Ionic 2: roblouie.com/using-gestures-in-the-ionic-2-beta

It’s possible that as Ionic 2 gets farther along this tutorial will no longer be necessary because there will be better official support, but for now this works well!

6 Likes
2

Hey all, just wanted to let you know that I’ve updated this tutorial to specifically cover long presses with custom times and double taps. Have a read! :book:

2 Likes
3

Thansk @rlouie.
Here is how I integrated it in my app :

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

@Directive({
    selector: '[longPress]'
})
export class PressDirective implements OnInit, OnDestroy {
    el: HTMLElement;
    pressGesture: Gesture;

    @Output()
    longPress: EventEmitter = new EventEmitter();

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

    ngOnInit() {
        this.pressGesture = new Gesture(this.el);
        this.pressGesture.listen();
        this.pressGesture.on('press', e => {
            this.longPress.emit(e);
        })
    }

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

Then usable like this :

<span (longPress)="onLongPress($event)">Mystuff</span>
8 Likes
4

Very nice directive, btw can others share their components and directives? This will be learning on steroids. Thanks a lot.

5

It’s the same thing?
<Span (press)="onLongPress($event)">MYStuff</ span>

I have missed something. Why to Implement a directive? Knowing that the Event (press) is available.

3 Likes
6

hello @LAFONT,

i asked myself the same question and actually used (press).
but then i discovered a difference. imagine the following:

<ion-card *ngFor="let word of dictionary" 
            (click)="hello(word)" (press)="bye(word)">
    <ion-card-header>
        {{ word }}
    </ion-card-header>
    <ion-card-content>
        lorem and so on...
    </ion-card-content>
</ion-card>

so we have a lot of cards and we actually need to scroll. if you try to start the scrolling on one card itself, the scrolling event will not fire and nothing will happen. but if you use (longPress) with its directive. it will work. it seems like (press) is reserved for the scolling event. so it works for me. and thanks @rloui for the great tutorial.

7

Ok, i understand. Thank you for your explanation.

For information, “Gesture prevent vertical scroll” seems to be a bug:

8

i wanted to actually implement a “swipe-to-delete” for the cards. thanks for the information.

update: well for me something like this works perfectly fine:

<ion-card *ngFor="let ticket of allTickets | async | theTicketsFilter:tableFilter.value"
               (click)="triggerTicketComments(ticket.id)"
               (longPress)="triggerTicketEdit(ticket.id)"
               (swipeleft)="deleteTicket(ticket)">

so i guess the issue is really just for ion list or virtual scroll. i don’t use them. my ion-cards are in a grid column.

9

Have you implemented the directives (longPress) and (swipeleft) ? As Rlouie made.

Or just with the built-in directives?

Thanks for the information.

10

i implemented longPress from @rloui, yes.
but swipeleft is built-in. we can just use it.

11

@rloui Any way to get this solution running on a non typescript way?

Thanks

12

I have the same question. Does this (longPress) is actually longer than (press) gesture provided by IONIC ? or both of them are same ?

13

Generic type ‘EventEmitter’ requires 1 type argument(s) on

here
@Output()
longPress: EventEmitter = new EventEmitter();

1 Like
14

They do more or less the same thing. I assumed this tutorial would really only matter for a limited time, if you see what I wrote when I posted it:

This post is 8 months old, and back when I wrote this tutorial Ionic 2 was in a very early state. I wrote the tutorial because at the time many people were asking about how to support gestures, and there wasn’t any official support yet. Now there is.

15

Thanks for your reply @rlouie . I understand that ionic 2 is changing and giving better support for components. i am now using (press) gesture in my app, which is quite handy now.

16

@oaksol

@Output()
longPress: EventEmitter< any > = new EventEmitter();

1 Like
17

Hi guys. Just an update. Ionic 2 now has gesture controls. see

3 Likes
18

You saved me hours man, thank you very much!! This is an amazing workaround to fix the vertical scroll bug in beta when binding a swipe event. :joy:

19

Any idea what is the best way to pass options to gesture controls (like the time threshold for press event)

20

@Jonnyohoh
please i want this code