How can I eliminate the ~300ms tap delay on iOS devices when using Dart Polymer's paper-elements together with Angular 2?
e.g. In an Angular 2 component, if I have an HTML template that includes paper-button
with (click)="myFunc()"
, in iOS devices, myFunc is called after this dreaded infamous delay.
I've tried using FastClick.js, but after I attach it (to the body, or a specific paper-button), the element is no longer clickable, I can still see the ripple effect when I tap it, but the method is not getting called (on mobile, however in desktop browsers it works as usual), it also has the same effect on paper-input
(s), it's not getting focused.
Can something be done about it? Maybe a Dart/Angular2 equivalent of FastClick.js could be made?
It's worth mentioning that under a UIWebView (cordova), I couldn't get Angular2.dart and Polymer.dart to work at the same time, it seems they don't play well together, which is also a blocker, could use some help on that as well.
Sources: https://github.com/aabluedragon/dart_issue_polymer_angular2_cordova
on-tap
event prevents the tap delay, however, that means you cannot use Angular2's (click) events, which don't handle taps nicely as Polymer.I couldn't get FastClick to work with Angular 2+ (Angular 4 in my case), but I found a different solution called ng2-events which has multiple features, one of them being support for touch events in angular 4.
# for angular 5
npm install --save ng2-events
# for angular 4
npm install --save ng2-events@3.1.0
Then in app.module.ts
import {NgModule} from "@angular/core";
import {TouchEventModule} from "ng2-events/lib/touch";
@NgModule({
imports: [TouchEventModule],
exports: [TouchEventModule]
})
export class AppModule {}
Then in your template:
<button (down)="touchAction()">Try this on mobile device</button>