Ionic 4: Quickly add UX Through the Use of Double-taps!
Note: This article is outdated, I highly recommend that you go check out my newer article regarding how to add double-tap (and more) to your ionic-application.
Most users are trained to do things by instinct when interacting with apps. Ionic, despite being a great framework, doesn’t always have all of the interactions built in by default. For all of the niceties of Ionic, there is still a lot missing from the Framework. You’re probably familiar with Ionic’s tap directive, and have probably used it all over your application like so:
<ion-item tappable (tap)="someFunction">... </ion-item>Well, what if you wanted to do something when the user double taps instead of single taps, for example: Liking a photo on Instagram? Unfortunately, you’ll be met with Github issues that ask for this feature, but most if not all of them are often closed without much help.
Have no fear though, that’s what today’s topic is about! Let’s get started.
First off, you’ll need to install hammerjs as a project dependency. It’s bundled with the Ionic Framework but isn’t available to us natively.
We can quickly solve that by running npm install hammerjs.
Next, we need to import hammerjs into our main.ts file if it is not already done:
main.ts
import 'hammerjs';That’s literally all we need to do for that file.
app.module.ts
In your app.module.ts file, we’ll need to add the following class CustomHammerConfig.
export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
'press': {time: 500}, // default: 251 ms
'pinch': {enable: false},
'rotate': {enable: false},
};
}The details aren’t really important, but we just have to let Ionic/Angular know that we’ll be leveraging hammerjs events. In the above config, I’ve overridden the press directive’s timeout to be 1/2 of a second, instead of the default of 251ms, just to give us some wiggle room. I’ll explain why, later.
Then in your providers' array, add the CustomHammerConfig
providers: [
...
{provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig},
],Create the double tap directive
Run the command ionic g directive directives/double-tap which will create the double-tap.directive.ts file that we’ll be leveraging to create the double tap functionality in our app. Replace the contents of that file with this:
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);
}
}Test It Out!
Now you’re all set to try out your new doubleTap directive. Wasn’t that hard to set up, now was it?
<img tappable doubleTapable (doubleTap)="doSomething()" (tripleTap)="doAnotherThing()" src="https://source.unsplash.com/random" alt=""/>If you replace doSomething() with some function, and doAnotherThing() with another function, you can easily see that the directive is working now!
The important part to remember is that you declare the directive on the component you want to use it on, which is why we wrote doubleTappable and the events are surrounded by the parentheses (doubleTap), tripleTap.
What’s Going on Under the Hood?
HammerJS is a wonderful tool within the Ionic framework, and I urge everyone to take a look at it if you have the time. It is really customizable and will make your life a lot easier in the future if you understand it’s capabilities.
By default, HammerJS recognizes a sequence of taps to occur between 300ms of each other. This is why we overrode the press config, to be 500ms, because the default is 251ms. There are some other rules for detecting a tap such as you can only have one finger on the screen at a time Required pointers, and you can only have moved between taps within a certain threshold: 10. The threshold is 10% distance of the screen, from the originating tap. So if you move more than 10% from the original tap, the event won’t fire.
Questions?
You can find me on:
- GitHub: https://github.com/bengejd/
- Medium: https://medium.com/@JordanBenge
Who am I? My name is Jordan Benge, I am a Software Developer who loves helping others and contributing to Open-Source. I’ve been working in the Ionic Framework since Ionic 1, and have tried to keep up to date on the latest and greatest when it comes to Hybrid Mobile App Development.
