Clicks event does not trigger fast always

#1

Sometimes the click event on ion-item trigger fast and sometimes i have re-click twice to trigger the click event on the same page.

I am facing the issue in below template UI page


<ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start"> 
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
    <ion-title> {{ exname | uppercase }} </ion-title> 
    <ion-buttons   slot="primary"  *ngIf="id" (click)="goback()">
        <ion-button [disabled]="disableButton || loading" shape="round" fill="outline" color="medium"><ion-icon name="ios-arrow-back" size="large"></ion-icon>Back</ion-button>
    </ion-buttons> 
  </ion-toolbar> 
</ion-header> 
<ion-content>  
   <ion-spinner *ngIf="loading"></ion-spinner>  
  <div *ngFor="let el of exlists">   
        <ng-template [ngIf]="!el.content && el.menu_icon2=='noimg.jpg'">
            <ion-card class="card">
              <ion-item  (click)="showLoading()"  [routerLink]="disableLink ? null : ['/home',el.id,el.menu_name]" > 
                <ion-thumbnail slot="start">   
                    <img class="round"  style="height:48px;" src="https://www.xxxx.com/uploads/icons/{{el.menu_icon}}"/>
                </ion-thumbnail>
                <ion-label> 
                    {{el['menu_name' + setTextLang]}} 
                  </ion-label>
                <ion-icon style="color:#363640" name="ios-arrow-forward"></ion-icon>
              </ion-item>  
            </ion-card>
          </ng-template>
        <ng-template [ngIf]="el.content && el.menu_icon2 !=='noimg.jpg'">
            <ion-list class="card"> 
            <ion-item   (click)="showLoading()" [routerLink]="disableLink ? null :['/exercise',el.id,el.menu_name]"> 
              <ion-thumbnail slot="start"> 
                  <img class="round" style="height:48px;" src="https://www.xxxx.com/uploads/icons/{{el.menu_icon}}"/>
                </ion-thumbnail>
              <ion-label>{{el.menu_name | uppercase }}</ion-label>
              <ion-icon style="color:#363640" name="ios-arrow-forward"></ion-icon>
            </ion-item> 
          </ion-list>
        </ng-template>  
  </div> 
</ion-content>

TS file


import { Component, OnInit, OnDestroy} from '@angular/core';
import { ResService } from '../res.service';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs';
import { NavController, ToastController } from '@ionic/angular';
import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';
import { DataService } from '../data.service';
import { NativeStorage } from '@ionic-native/native-storage/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit, OnDestroy {
  public exlists;
  showMyElement = false;
  private weightTrainingUrl =
  'https://webservice.xxxx.com/Exercise/show/kid/23sfsdsa8797ssdii/mid/107/pid/0';
 // 'http://192.168.43.113/restful/Exercise/show/kid/23sfsdsa8797ssdii/mid/107/pid/0';
  id: number;
  exname: string;
  loading = true;
  clickcount: number;
  disableButton = false;
  disableLink = false;

  setLang: string;
  setTextLang: string;
  paramsHomeSubscription: Subscription;


  constructor(
    private _service: ResService,
    private _dataservice: DataService,
    private route: ActivatedRoute,
    private navCtrl: NavController, private toastController: ToastController,
    private tts: TextToSpeech,
    private nativeStorage: NativeStorage

  ) {
    this.clickcount = 0;
    // stop sound if previously playing
    this.tts.speak('').then(_ => {
      this.tts.stop();
    });
    // this.id = this.route.snapshot.params['id'];
    // this.exname = this.route.snapshot.params['name'];
    this.paramsHomeSubscription = this.route.params.subscribe(
      // subscribe method takes three parameters
      (params: Params) => {
        this.id = params['id'];
        this.exname = params['name'];

      }
    );
        // check sound mute status in cache
        this.nativeStorage.getItem('setLang').then(d => {
         // this.setLang = d === null ? 'en' : d;
          if (d === 'pt') { // portuguess
            this.setTextLang = '_' + d;
            this.setLang = d;
          } else {
            this.setTextLang = '';
          }
        });
        if (this.setLang == null) {
          this.setTextLang = '';
        }

    this.getDetails();
  }

  async presentToast(message) {
    const toast = await this.toastController.create({
      message: message,
      duration: 4000,
      animated: true
    });
    toast.present();
  }

  async getDetails() {
    // check if it is parent or it is not
    if (this.id) {
      const url2 =
      'https://webservice.xxxx.com/Exercise/show/kid/23sfsdsa8797ssdii/mid/' + this.id;
     // 'http://192.168.43.113/restful/Exercise/show/kid/23sfsdsa8797ssdii/mid/' + this.id;
      this._service.getResource(url2).subscribe(data1 => {
        this.loading = false;
        this.exlists = data1.articleList;
      });
    } else {
      this.exname = 'Weight Training';
      this.getWtExercises();
    }
  }

  async goback() {
    this.clickcount = this.clickcount + 1;
    if (this.disableButton === false) {
      this.disableButton = true;
      this.navCtrl.goBack(true);
      return;
    }
    if (this.clickcount === 3) {
      this.presentToast('Please wait, you already tapped to go BACK');
      return;
    }
    if (this.clickcount > 3) {
      this.presentToast(
        'You are tapping BACK button too often. Please wait...'
      );
      return;
    }
  }

  async showLoading() {
    this._dataservice.changeMessage(this.exname);
    this.disableLink = true;
  }
  ngOnInit() {}

  async getWtExercises() {
    this._service.getResource(this.weightTrainingUrl).subscribe(data => {
      this.loading = false;
      this.exlists = data.articleList;
    });
  }

  ngOnDestroy(): void {
    this.loading = false;
    if (this.paramsHomeSubscription) {
      this.paramsHomeSubscription.unsubscribe();
    }
  }
}

package.json

{
  "name": "weightTraining",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ionic-native/app-rate": "^5.0.0-beta.22",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/file": "^4.18.0",
    "@ionic-native/native-storage": "^5.0.0-beta.22",
    "@ionic-native/network": "^5.0.0-beta.22",
    "@ionic-native/social-sharing": "^5.0.0-beta.22",
    "@ionic-native/spinner-dialog": "^5.0.0-beta.22",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic-native/text-to-speech": "^5.0.0-beta.22",
    "@ionic/angular": "4.0.0-beta.16",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "cordova-android": "7.1.4",
    "cordova-plugin-apprate": "1.4.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-file": "6.0.1",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.1",
    "cordova-plugin-native-spinner": "1.1.3",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-nuance-speechkit": "2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-tts": "0.2.3",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "5.4.3",
    "core-js": "^2.6.1",
    "es6-promise-plugin": "4.2.2",
    "ionic-cache": "^3.1.3",
    "ionic-cache-observable": "0.0.6",
    "ng2-translate": "^5.0.0",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.10.0",
    "@angular-devkit/build-angular": "^0.11.4",
    "@angular-devkit/core": "~7.0.0",
    "@angular-devkit/schematics": "~7.0.0",
    "@angular/cli": "^7.1.4",
    "@angular/compiler": "~7.0.0",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@ionic/angular-toolkit": "^1.2.2",
    "@types/jasmine": "^2.8.14",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^10.12.18",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.2",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-apprate": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-x-socialsharing": {
        "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
      },
      "cordova-plugin-native-spinner": {},
      "cordova-plugin-tts": {},
      "cordova-plugin-file": {}
    },
    "platforms": [
      "android"
    ]
  }
}

I am using
CLI 4.6.0
npm 6.4.1
Angular 6

Can you help me to make the first time click on this page responsive ! Sometimes i have to click twice to make it work!

#2

because you have a debounceTime in click. I would suggest to use (tap) instead of (click) esp. if you use ‘click’ on other elements then button

#3

hello

You can use (tap) instead of (click) or
use “tappable” keyword with (click).

sometime (tap) is not working as aspected like (click).

so i recommend use “tappable” keyword with (click).

:grinning:

#4

@abhayjani How to write “tappable” keyword with (click).! Can you show me a sample code example, Please!

#5

You need just add tappable in component where you use (click)
like this

<ion-item  (click)="showLoading()" tappable  [routerLink]="disableLink ? null : ['/home',el.id,el.menu_name]" > 
   <ion-thumbnail slot="start">   
      <img class="round"  style="height:48px;" src="https://www.xxxx.com/uploads/icons/{{el.menu_icon}}"/>
    </ion-thumbnail>
    <ion-label> {{el['menu_name' + setTextLang]}} </ion-label>
    <ion-icon style="color:#363640" name="ios-arrow-forward"></ion-icon>
</ion-item>  
#8

did my answer help you? then please accept it as solution and mark with a heart^^