5

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.
Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Alon Amir
  • 4,913
  • 9
  • 47
  • 86
  • Did you enable CSP for Polymer + Dart2js – Günter Zöchbauer Aug 06 '15 at 08:17
  • I've enabled a global CSP: ``. And in Cordova's config.xml: ` `. Funny thing is, it works in Safari and not under Cordova, and that's just one part of the problem, also have the tap delay thing. – Alon Amir Aug 07 '15 at 08:27
  • 1
    I think you need to enable it twice in pubspec.yaml. I have no knowledge about the tap delay. – Günter Zöchbauer Aug 07 '15 at 09:09
  • @GünterZöchbauer Thanks, it partially solved the white Cordova UIWebView issue, by partially I mean that at the first time compilation is commencing, the UIWebView remains blank even after it completes compiling, however if I relaunch the Cordova app it's showing the element (because it's already compiled), so it's not yet completely solved. – Alon Amir Aug 07 '15 at 09:19
  • `$dart2js` alsi allows to enable CSP. There are some related questions on SO about this. I'm only on my phone and therefore leave it to you to look it up ;-) – Günter Zöchbauer Aug 07 '15 at 10:58
  • You still haven't enabled CSP for `$dart2js` in your code in the GitHub repo. – Günter Zöchbauer Aug 08 '15 at 17:29
  • Thanks Gunter, but I've tried adding `- $dart2js: csp: true` just below the polymer transformer, compilation as usual worked fine, but it didn't help with the white screen issue. I'll commit it to my github issue repo to show it. – Alon Amir Aug 08 '15 at 17:59
  • Doesn't look like you are initializing Polymer properly http://stackoverflow.com/questions/20982489/how-to-implement-a-main-function-in-polymer-apps/20982658#20982658 – Günter Zöchbauer Aug 08 '15 at 18:11

1 Answers1

2

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>
Yes Barry
  • 9,514
  • 5
  • 50
  • 69
  • It works, but it seems to cause event bubbling. In Android, clicks are fired twice. Is there a way to stop it? – francojay Aug 29 '18 at 00:27
  • @francojay It's been a while since I used this. But I think you can pass the event object like `` and then in your `touchAction()` function you receive the event and call event.stopPropagation() like: `public touchAction(event: any): void { event.stopPropagation(); }`. Sorry I don't have more info. Good luck! – Yes Barry Aug 29 '18 at 15:41