Currently, I am exploring a tutorial that demonstrates how to implement a double tap feature in Ionic 4 to create an event.
If you're interested, you can check out the tutorial here.
Following the steps in the tutorial, I have installed Hammer JS and imported it into my main.ts file.
import 'hammerjs'
In addition, my app module setup looks like this,
import { AngularFireFunctionsModule, FunctionsRegionToken } from '@angular/fire/functions';
import { DoubleTapDirective } from './directives/double-tap.directive'
export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
'press': {time: 500}, // default: 251 ms
'pinch': {enable: false},
'rotate': {enable: false},
};
}
@NgModule({
declarations: [AppComponent, DoubleTapDirective],
imports: [
HttpModule,
BrowserModule,
providers: [
Camera,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig},
],
bootstrap: [AppComponent]
})
export class AppModule {}
One key element of the setup is the Double Tap Directive,
import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
@Directive({
selector: '[doubleTapable]'
})
export class DoubleTapDirective {
@Output() doubleTap = new EventEmitter();
@Output() tripleTap = new EventEmitter();
constructor() {}
@HostListener('tap', ['$event'])
onTap(e) {
if (e.tapCount === 2) this.doubleTap.emit(e);
if (e.tapCount === 3) this.tripleTap.emit(e);
}
}
After implementing this setup in my app, I tried to enable a double tap feature where users can add posts to their favorites by double tapping on them in the feed. However, the current implementation is not working as expected. When double tapped, the app navigates to the post details page instead of triggering the doSomething() event.
Here's a snippet of the code from Tab4.html,
<div (doubleTap)="doSomething()" id ="post" *ngIf="posts" >
<ion-card *ngFor ="let post of posts" [routerLink]="['/tabs/details-feed/', post.postID]">
<div id ="profileImage" >
<img id ="profileImageIn" [src]="post.profileImage">
</div>
<div id ="userName" ><h6>{{post.username}}</h6></div>
<img [src]="post.image">
</ion-card>
</div>
And the corresponding code from Tab4.ts,
import { ToastController } from '@ionic/angular';
constructor(
private aff: AngularFireFunctions,
public toastController: ToastController
) {
async doSomething() {
const toast = await this.toastController.create({
message: 'Added to favorites.',
duration: 2000
});
toast.present();
}
I am seeking assistance in successfully implementing the double tap event. Any suggestions or insights would be greatly appreciated.