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>
</div>

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;

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

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

    logout() {
        this.auth.logout();
    }

    updateNotifications() {
        OneSignal.disablePush(!this.notifications);
    }

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

    onDoubleTap() {
        this.displayDebug = !this.displayDebug;
        console.log(this.displayDebug);
    }

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

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

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

Any thoughts why?

2 posts - 2 participants

Read full topic