Clicks event does not trigger fast always

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!

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

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:

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

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>  

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