ionic2 tap vs click

Question

I am starting with angular2 and ionic2;

In ionic2, I have a button that will call a method of my component. Like this:

<button secondary clear large>
</button>

Should I use (click) - angular2 OR (tap) - ionic2?

Like this:

(click)

<button secondary clear large (click)="pause()">
</button>

(tap)

<button secondary clear large (tap)="pause()">
</button>

There are some difference? You can see about (tap) in http://ionicframework.com/docs/v2/components/#gestures

Thx.

Answer 1

If making mobile apps, (tap) might be better. This is because when using (click) the action always executes, even when tapping accidently. The (tap) won't execute if the user holds it for a longer period. And if you want to have a button that needs to be clicked for a longer period of time you can use the (press).

Note that in some ionic versions the (click) event won't execute on iOS. Therefore using (tap) would be the recommended solution.

Answer 2

I think it really depends on how "native like" you want the user experience to be.

The (tap) event comes from the Hammer.js library. If you look at the link you will see the requirements that must be met in order for the tap event to fire.

The first requirement to be aware of is the time option with a default value of 250ms. This means that if a press is greater than 250ms then the event won't fire.

The second requirement to be aware of is the threshold option with a default value of 2 (not sure what unit this is, possibly pixels). This means that if the press has movement greater than 2 the event will not fire. E.g. moving your finger in a left-to-right direction above the screen and then pressing the element during this movement the event may not fire depending on the speed of the movement.

However

The (click) event will still fire in both cases I just pointed out providing that when the press is released it is still inside the target element.

---

At the beginning the reason I said "it really depends" is based on how other apps handle these scenarios (each app could potentially differ and it may also differ based on the result of the use case).

As far as I'm aware buttons on the Android apps I have checked (the ones with a visual result e.g. navigation or popup messages) work in the same way as the (click) event provided by Angular.

I can't comment on how IOS apps work using the same principles as I haven't tested.

I am not implying that in every use case (click) should be used instead of (tap) but try take into consideration how other native apps behave and decide from there which is most suitable.