How can mitigate a tab click?

Viewed 80

I have a tab group:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Programmes" tabIcon="icon-programmes"></ion-tab>
  <ion-tab [root]="tab2Root" (ionSelect)="studioCheck()" tabTitle="Studio" tabIcon="icon-studio"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Library" tabIcon="icon-library"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="icon-profile"></ion-tab>
</ion-tabs>

When a user clicks the second tab ('Studio'), I need to check if they have access to it yet. If they do, great, if they don't, I want to show a toast notification and load the first tab.

How can I do this?

I thought a return false would suffice on studioCheck(), but it does not.

Typescript:

  studioCheck() {
    console.log('Studio visited');

    // Grab studio selected level
    this.storage.get('studio_level').then((val) => {
      console.log('Storage queried');
      if(val) {
        console.log('Level ID: ', val);
        return true;
      } else {
        // No level selected
        let toast = this.toastCtrl.create({
          message: 'Please choose a programme in order to use the Studio',
          duration: 3000,
          position: 'top'
        });
        toast.present();
        this.navCtrl.parent.select(0);
        return false;
      }
    });
  }

I thought that perhaps the ionSelect doesn't wait for the asynchronous storage.get call, so I just did a return false; at the top of the function, but that does the same.

Any ideas?

1 Answers
Related