Cannot Dismiss LoadingController In Error Response Of Subscribe() - Ionic 4

Ionic Framework
1

I’m able to dismiss the LoadingController when I get a SUCCESS response from subscribe, but when I get an ERROR response, I’m not able to dismiss. Please help!

I’m a professional Python developer and a total newbie to Ionic, just started a day ago. So, please assist as such.

import { Component, OnInit } from '@angular/core';
import { ToastController, LoadingController } from '@ionic/angular';

import { CallapiService } from '../callapi.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  userEmail = '';
  userPassword = '';
  loginUrl = 'login/';
  loginMethod = 'POST';
  postBody = {};


  constructor(
    public toastController: ToastController,
    public loadingController: LoadingController,
    private callApiService: CallapiService,
  ) { }

  ngOnInit() {
  }

  async presentToast(displayMessage) {
    const toast = await this.toastController.create({
      message: displayMessage,
      duration: 2000,
      position: 'middle',
    });
    return await toast.present();
  }

  async presentLoading(loadingMessage) {
    const loading = await this.loadingController.create({
      message: loadingMessage,
    });
    return await loading.present();
  }


  loginUser() {
    if (this.userEmail === '' || this.userPassword === '') {
      this.presentToast('Email and password are required.');
    }

    else {
      this.presentLoading('Processing...');
      this.postBody = {
        email: this.userEmail,
        password: this.userPassword,
      };
      this.callApiService.callApi(this.loginUrl, this.postBody, this.loginMethod).subscribe(
        (success) => {
          console.log(success);
          this.loadingController.dismiss();
        },
        (error) => {
          console.log(error);
          this.loadingController.dismiss();
        }
      );
    }

  }

}
2

Have you tried making your loading variable global? then access it to hide?

3

Doesn’t work. Have already tried it.

4

Have you tried this?

async loginUser() {
  ...
  await this.presentLoading('Processing...');
  ...
}
5

Are you tried using

setTimeout(() => {
this.loadingController.dismiss();
}, 4000);

6

Solved it:

const loading = this.presentLoading('Processing...');
      this.postBody = {
        email: this.userEmail,
        password: this.userPassword,
      };
      this.callApiService.callApi(this.loginUrl, this.postBody, this.loginMethod).subscribe(
        (success) => {
          loading.then(() => { this.loadingController.dismiss(); });
          this.apiResponse = success;
          if (this.apiResponse['message'] !== 'success') {
            this.presentToast('Invalid credentials!');
          }
          else {
            this.storage.set('TOKEN', 'Token ' + this.apiResponse['token']);
            this.presentToast('Success!');
          }
        },
        (error) => {
          loading.then(() => { this.loadingController.dismiss(); });
          this.presentToast('Error!');
        },
        () => {
          loading.then(() => { this.loadingController.dismiss(); });
        }
      );