Issue with Gestures and showing/hiding elements

I wanted to create a “hidden” feature on the app to allow for some quick debugging when users have issues.

On an element in my app, I added a double-click gestures that was display some debug information, however, it appears that my logic is flawed somewhere. Hopefully someone can take a look and see what I may be missing.

In my .html file, I have a simple element like this:

<div class="ion-text-center" #doubleTap>
    <p><small>App Version: {{ version }}</small></p>

In my .ts file, I set-up the gesture and logic like this:

    @ViewChild('doubleTap') doubleTap: ElementRef;

    version:string = '0.0.0';
    displayDebug:boolean = false;

    private lastOnStart: number = 0;
    private DOUBLE_CLICK_THRESHOLD: number = 500;

        private auth: AuthService,
        private gestureCtrl: GestureController
    ) { }

    ionViewDidEnter() {
        const gesture: Gesture = this.gestureCtrl.create({
            el: this.doubleTap.nativeElement,
            threshold: 0,
            gestureName: 'double-tap',
            onStart: () => { 

    logout() {

    updateNotifications() {

    onStart() {
        const now =;
        if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
            this.lastOnStart = 0;
        } else {
            this.lastOnStart = now;

    onDoubleTap() {
        this.displayDebug = !this.displayDebug;

Back in my .html file, I wanted to display the debug info like this:

<div *ngIf="displayDebug">
                <ion-label>Debug Info</ion-label>

But, no matter what the displayDebug is set to (true/false). Nothing is being displayed.

Any thoughts why?

Why not just add a click event to the element and attach a method to it that toggles a value true or false?

This seems over engineered for something simple, you shouldn’t be using viewchild for this.

1 Like

I was trying to add a double-click event and not just a standard click event.