Ionic - Double Tap?

#1

Can someone tell me how to have Double Tap working with ionic 3 for iOS? I don’t see this listed as a default gesture in http://ionicframework.com/docs/components/#gestures.

Ouput of ionic info:

cli packages: (xxx)

    @ionic/cli-plugin-cordova       : 1.6.1
    @ionic/cli-plugin-ionic-angular : 1.4.1
    @ionic/cli-plugin-proxy         : 1.4.1
    @ionic/cli-utils                : 1.7.0
    ionic (Ionic CLI)               : 3.7.0

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.0.2
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.5.3

System:

    Android SDK Tools : 26.0.2
    Node              : v6.9.1
    OS                : OS X El Capitan
    Xcode             : Xcode 8.2.1 Build version 8C1002 
    ios-deploy        : 1.9.1 
    ios-sim           : 6.0.0 
    npm               : 3.10.8
#2

A quick search turns up this solution: http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/

#3

Do you mean I have to implement myself. Ionic doesn’t have native support for double tap?

#4

Based on my ~5 minutes of research that’s what I found. I haven’t had any use for double-tap myself so I don’t have a first-hand solution for you, sorry. The implementation looks simple though, it’s all right there for you.

#5

Thank you for your reply. But I though that ionic being in version 3 would handle gestures better. Since no one from ionic team have responded I assume that I will have to implement the double tap myself, exactly what I was trying to avoid.

#6

Hi,

Any solution for this?

#7

I had to implement the double tap gesture myself.

#8

Mind sharing the solution :slight_smile: ?

#9

A simple and straightforward way of implementing the doubletap, is shown below. The doubletap is “provided” by Ionic (which uses HammerJS under the hood), just not exposed in the way you probably wished / expected it to be. You could easily create your doubletap directive to make things even easier, which is recommended if you wanted to use e.g. the pinch gesture as described here: https://www.ionicrun.com/using-the-pinch-gesture-in-ionic-2/.

home.html

<div #element>Your doubletap element</div>

home.ts


@ViewChild('element') el: ElementRef;
private pressGesture: Gesture;

public ngAfterViewInit(): void {

  this.pressGesture = new Gesture(this.el.nativeElement);

  this.pressGesture.listen();
  this.pressGesture.on('doubletap', (e:Event) => {

    console.log(e.type);
    // or ... this.yourMethod(e);
    
  });

}

public ngOnDestroy(): void {
  this.pressGesture.destroy();
}
Redirect to homepage when click tow time on the tabs
#10

Thanks, it works just fine!

#11

@dalie how to assign these method to multiple dynamic items?

#12

Put it in a directive

E.g.

and then bind through (doubletap)="myMethod(variable)"

#13

@Tommertom thank you so much :grinning:

#14

@mathewk, sorry, a bit late, and @Tommertom provided the right direction for you, but in case you are interested, and for for completeness;

# 1 create a new project
ionic start doubletap-in-ionic blank && cd doubletap-in-ionic

# 2 generate a new directive
ionic g directive pinch

# 3 add the DirectivesModule to your imports inside the app.module.ts.
...
import { DirectivesModule } from '../directives/directives.module';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    DirectivesModule
  ],
  ...
})

# 4 open `src/directives/doubletap/doubletap.ts` and paste the following snippet 

import {
  Directive,
  AfterViewInit,
  OnDestroy,
  ElementRef,
  Output,
  EventEmitter
} from "@angular/core";
import { Gesture } from "ionic-angular";

@Directive({
  selector: "[doubletap]"
})
export class DoubletapDirective implements AfterViewInit, OnDestroy {
  private pressGesture: Gesture;

  constructor(
    // the actual element
    private el: ElementRef
  ) {}

  public ngAfterViewInit(): void {
    this.pressGesture = new Gesture(this.el.nativeElement);

    this.pressGesture.listen();
    this.pressGesture.on("doubletap", (e: Event) => {
      this.ondoubletap.emit(e);
    });
  }

  // emit the `Event`, bind to (ondoubletap) in your markup
  @Output() public ondoubletap: EventEmitter<Event> = new EventEmitter();

  // clean things up
  public ngOnDestroy() {
    this.pressGesture.destroy();
  }
}


# in e.g. `home.html` add the attribute directive and bind to the (ondoubletap) event
# 5 you can use it with an *ngFor or *ngIf etc.
<ion-item doubletap
          (ondoubletap)="log($event)">
  <ion-label>Doubletap!</ion-label>
</ion-item>

Hope it helps, or maybe someone else!

#15

Good stuff!

Should be marked as solution imho

#16

Note, this directive will also be triggered when you single tap on the element.

#17

Note, this directive will also be triggered when you single tap on the element.