Secret menu in an Ionic App

Posted on Updated on

I wanted a way for people to be able to reset the app, kind of for debugging purposes and while a “reset button” works, I don’t think it’s best to have it public.

So, after looking around, I thought that maybe a hold for 5 seconds with a counter would work. However, I came across a post asking a similar, but not the same idea and it triggered my mind to try something different.

Basically, you tap and hold 5 times on the ‘Header Text’ and then, your secret function will trigger.

Here’s my example:

Please note, WordPress source-code formatting is terrible.

 

About.html
<ion-header>
<ion-navbar>
<ion-title (press)="pressEvent($event)">About App {{press_text}}</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<h1>App Name</h1>
<p>Version: 1</p>
<p>Created with love by me </p>
</ion-content>


 

 

About.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { Storage } from '@ionic/Storage';
import { StartPopupPage } from '../start-popup/start-popup';

/**
* Generated class for the AboutPage page.
*
*/

@IonicPage()
@Component({
 selector: 'page-about',
 templateUrl: 'about.html',
})

export class AboutPage 
{
 constructor(
  publicnavCtrl: NavController,
  privatestorage: Storage,
  privatemodal: ModalController,
  publicnavParams: NavParams) 
 {}

 publicpress: number = 0;
 publicpress_text: string = "";
 pressEvent(e) 
 {
  this.press++
  this.press_text = this.press + "";
  if (this.press >= 5)
  {
   // Do something after the header has been pressed 5 times.
   // In this case, it runs the function and the resets everything
   // back to 0 ready to reset the function again if required.
   this.resetSettings();
   this.press = 0;
   this.press_text = "";
  }
 }

 ionViewDidLoad() 
 {
  console.log('ionViewDidLoad AboutPage');
 }

// Doing something after the header has been pressed 5 times.
 async resetSettings()
 {
  // clear out the data
  this.storage.set('Settings1', null);
  this.storage.set('Settings2', null);
  // Show a modal.
  // You'll need a popup html page too 
  constprofileModal = this.modal.create(StartPopupPage);
  profileModal.onDidDismiss(data => 
  {
   console.log(data);
  });
  profileModal.present();
 }
}



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s