Can't call an alert inside a function in ionic 4

Question

I wan't to call an alert inside a function which is implementing Firebase authentication.

My Typescript code (jQuery Enabled):

async emptyAlert() {
    const empty = await this.alertController.create({
      header: 'Error!',
      message: 'All fields are required. Please fill the details and try again',
      buttons: ['OK']
    });

    await empty.present();
  }
async errorAlert(message) {
    const errorAl = await this.alertController.create({
      header: 'Error!',
      message: message,
      buttons: ['OK']
    });
    await errorAl.present();
  }

  doLogin() {
    const email = $('#loginEmail').val();
    const password = $('#loginPassword').val();
    if (email === '' || password === '') {
      this.emptyAlert();
    } else {
      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        // Handle Errors here.
        // const errorCode = error.code;
        const errorMessage = error.message;
        this.errorAlert(errorMessage);
      });
    }
  }

Please note that the above code is implemented after constructor(public alertController: AlertController) { } present inside export class LoginPage implements OnInit{…}

I am able to call emptyAlert(), which is a similar alert like errorAlert, but when I call errorAlert(), it says ERROR TypeError: Cannot read property 'errorAlert' of undefined.

Please help. Thanks in advance.

Answer 1

You need to use arrow function, this is automatically bound correctly.you can transpile the arrow functions if you plan on supporting browsers

firebase.auth().signInWithEmailAndPassword(email, password).catch((error) => {
        // Handle Errors here.
        // const errorCode = error.code;
        const errorMessage = error.message;
        this.errorAlert(errorMessage);
});