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.
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.
A simple and straightforward way of implementing the doubletap, is shown below. The doubletapis “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();
}
@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>
hi @dalie i have tried out you solution, i was facing issue can see and tell what is wrong in this code
ts file code @ViewChild('doubleEle') doubleEle:ElementRef; private pressGesture:Gesture; public ngAfterViewInit():void{ console.log(this.doubleEle); this.pressGesture = new Gesture(this.doubleEle.nativeElement); this.pressGesture.listen(); this.pressGesture.on('doubletap',(e:Event)=>{ console.log(e); }); };
html file code
`
{{ patner.firstName}}
`
this is error
TypeError: Cannot read property ‘nativeElement’ of undefined
TypeError: Cannot read property ‘nativeElement’ of undefined
at MyFamilyPage.webpackJsonp.115.MyFamilyPage.ngAfterViewInit (my-family.ts:38)
?