[Ionic4] How to properly implement Loading and Alert Controllers

Ionic Framework
1

Hello,

I have a method that handles sign in to Firebase. I would like to:

  • display Loading Controller while data is being sent
  • display any errors through Alert Controller, with message: error.message generated by Firebase

How should this be done in Ionic 4?

Here’s my method. Loading Controller seems to be working fine, but I can’t display Alert properly:

async onSignIn() {
    const loading = await this.loadingController.create({
      message: 'Please wait...',
      translucent: true
    });

    const alert = await this.alertController.create({
      header: 'Login Error!',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      // message: error.message,
      buttons: ['OK']
    });

    const email = this.signInForm.value.email;
    const password = this.signInForm.value.password;

    this.authService.signin(email, password).then(
      data => {
        loading.dismiss()
          .then(() => {
            this.navController.navigateRoot('');
          });
      },
      error => {
        loading.dismiss()
          .then(() => {
            alert.present();
          });
      }
    );
    loading.present();
  }

Thanks in advance for all hints!