Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dart Cordova+Polymer+Angular2+FastClick

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?

Update 1

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.

Update 2

Sources: https://github.com/aabluedragon/dart_issue_polymer_angular2_cordova

Update 3

  • White screen issue: It appears that the white screen problem on first run under Cordova is related to Polymer; it has nothing to do with Angular2.
  • Tap delay: Using Polymer's 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.
like image 859
Alon Amir Avatar asked Oct 31 '22 22:10

Alon Amir


1 Answers

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 [email protected]

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>
like image 186
Yes Barry Avatar answered Nov 15 '22 06:11

Yes Barry