Migrating Alert from Ionic 3 to Ionic 4

Ionic Framework
1

Hi,

I’m trying to migrating a very old Ionic 3 project. I’m still new to Ionic, java and js. This is my original Ionic 3 code using AlertController with a button:

borrarDB()
  {
    this.BTSerial.isConnected().then(() => {

      let alert = this.alertCtrl.create({
        message: 'Error',
        subHeader: 'Bluetooth conectado ',
        buttons: ['OK']
        });
       alert.present();     

    }, () => {
      
      let alert = this.alertCtrl.create({
          message: "Confirmar",
          subHeader: 'Esta seguro?',
          buttons: [
            {
              text: 'No',
              handler: () => {
                console.log('No clicked');
              }
            },
            {
              text: 'Si',
              handler: () => {
                console.log('Si clicked');
                
                this.Save.set ("EqList", "");
                this.Save.clear();
            
                this.Save.set ("EqAlias", "");
                this.Save.clear();
                
                console.log ("Base de datos borrada");                
              }
            }
          ]
        });
        alert.present();
    });

I have changed title and subtitle from Ionic 3 to message and subHeader but my problem is with alert.present() Reading Ionic 4 API there is a new async/await usage for AlertController but not sure how to use them with my original code.

Any help or guidance would be appreciated. Thanks.

2

Especially if you’re new to web programming, forget that async and await exist. They obscure what is actually happening, and it’s IMHO absolutely essential that you get fully grounded in the underlying fundamentals.

Imagine that you are in 1998, before smartphones, sitting in an IRC channel, talking to a friend who is currently not at their keyboard. You want to schedule a meal with them sometime in the next week, and want to know their schedule. In order to move the conversation forward as efficiently as you can, you write:

LMK if you’re free for dinner either Wednesday or Friday, and if so, what time would work for you.

You turn on a bot that looks for dates and times, and books a restaurant based on what your friend responds. The bot doesn’t know when it will be called on, but it knows what to expect in the way of input, and what it is supposed to do in that situation. The pseudocode for the bot looks somewhat like this:

class Reservabot {
  book(where: Restaurant, when: Date): Promise<string> {
    // implementation details irrelevant
  }

  sendInvitation(who: Friend, whens: Date[]): Promise<Message> {
    // implementation details irrelevant
  }

  invite(who: Friend, whens: Date[]): Promise<string> {
    return this.sendInvitation(who, whens)
      .then(rsp => {
         return this.book(randomRestaurant(), rsp.when));
      });
  }
}

Things to note about invite:

  • the first word of the method is return. this is always a good thing to strive for, especially when new. doing so avoids common bugs.
  • you have no idea when the book call is going to happen in wall clock terms. all you know is that by the time it does, your friend will have responded with an acceptable time. that time is only known inside that then clause.
  • it can combine the time that comes from your friend with locally known information (which restaurant to book)
  • it in turn returns the Promise that comes from book, which itself is going to represent an asynchronous process, because we don’t know when the restaurant will pick up the phone.
  • therefore, whoever calls invite will have to do so in similar fashion, hanging a then clause off of the call with whatever is to be done next (tell your friend where to go, for example).

Modern Ionic overlays work very much like this. The create call gives you a Promise of an alert. Once it resolves, you can call onDidDismiss on it to get another Promise that will resolve once the alert has been dismissed (and tell you the data that came with that dismissal). You can also call present on it, which returns a Promise that resolves once the alert has been presented (that you can ignore if you wish).

Something like this:

this.alertCtrl.create({...}).then(alert => {
  alert.onDidDismiss(rsp => {...});
  alert.present();
});
2 Likes
3

@madbyte
Don’t forget to add await to your alert controller create function.

async borrarDB()
  {
    this.BTSerial.isConnected().then(() => {

      let alert = await this.alertCtrl.create({
        message: 'Error',
        subHeader: 'Bluetooth conectado ',
        buttons: ['OK']
        });
       alert.present();     

    }, () => {
      
      let alert = this.alertCtrl.create({
          message: "Confirmar",
          subHeader: 'Esta seguro?',
          buttons: [
            {
              text: 'No',
              handler: () => {
                console.log('No clicked');
              }
            },
            {
              text: 'Si',
              handler: () => {
                console.log('Si clicked');
                
                this.Save.set ("EqList", "");
                this.Save.clear();
            
                this.Save.set ("EqAlias", "");
                this.Save.clear();
                
                console.log ("Base de datos borrada");                
              }
            }
          ]
        });
        alert.present();
    });
1 Like
4

Thank you for take your time for such detailed answer. I really appreciate it.

1 Like