CODEWITHSUNDEEP
angularjsangularionic-frameworkdialogionic2
Rick
Rick

Reputation: 4013

Show AlertController only one time - Ionic 2 AngularJS 2

I added a really basic AlertController in my project in order to give the user a quick introduction to the app but, as its purpose is purely to welcome, I'd like to show it once (the first time the app is opened) so that future times there'll be none.

I included it in ionViewWillEnter() method:

ionViewWillEnter() {
    let alert = this.alertCtrl.create({
      title: 'Title',
      subTitle: 'Subtitle',
      message: 'Message',
      buttons: ['OK'],
      enableBackdropDismiss: false
    });
    alert.present();
  }

As a starter in cross-platform development it's the first time I'm facing this problematic or rather what in Android is called SharedPreferences. I've looked at the official documentation of AlertController but I didn't find very much about the handler inside buttons.

This is what I do on Android to save the preference:

mPrefs = PreferenceManager.getDefaultSharedPreferences(this);

    Boolean welcomeScreenShown = mPrefs.getBoolean(welcomeScreenShownPref, false);

    if (!welcomeScreenShown) {

       AlertDialog.Builder(this)
          .setTitle("Title")
          .setMessage("Message")
          .setPositiveButton(R.string.ok, new DialogInterface.OnClickListener(){
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        }).show();
        SharedPreferences.Editor editor = mPrefs.edit();
        editor.putBoolean(welcomeScreenShownPref, true);
        editor.commit(); // Very important to save the preference
    }

Upvotes: 0

Views: 1572

Answers (3)

sebaferreras
sebaferreras

Reputation: 44669

Just like other SO users mentioned, you could use Ionic Storage for doing that. First add it to the providers list in your NgModule declaration (for example, in src/app.module.ts):

import { Storage } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    Storage
  ]
})
export class AppModule {}

Then you'll need to inject it in the page where you show the alert and use it like this:

import { Component, Injector } from '@angular/core';
import { Storage } from '@ionic/storage';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    constructor(..., private storage: Storage) {
        // ...
    }

    ionViewWillEnter() {
      this.storage.get('alreadyShown').then((alreadyShown) => {
         if(!alreadyShown) {
           this.storage.set('alreadyShown', true);
           this.showWelcomeAlert();
         }
      });
    }

    private showWelcomeAlert(): void {
      let alert = this.alertCtrl.create({
        title: 'Title',
        subTitle: 'Subtitle',
        message: 'Message',
        buttons: ['OK'],
        enableBackdropDismiss: false
      });
      alert.present();
    }
}

Upvotes: 1

Jay Ordway
Jay Ordway

Reputation: 1749

You could use ionic storage here

and then make sure to set a value indicating that the alert was shown in the alert's handler.

Upvotes: 0

chatpitau
chatpitau

Reputation: 1303

You can save somewhere in a persistant storage that you have already showed the AlertController.

For example, you can use the Secure Storage to store a variable that is set when you show the AlertController.

Upvotes: 0

Related Questions