Ionic LoadingController dismiss is not working

Question

I'm using ionic 5.0.0 and I have to implement a loading for my login screen. For that I done some implementations using LoadingController. But unfortunately I'm getting the below error. Please take a look.

ERROR TypeError: Cannot read property 'dismiss' of undefined
at LoginPage.push../src/app/login/login.page.ts.LoginPage.dismissLoader (login.page.ts:161)
at LoginPage.push../src/app/login/login.page.ts.LoginPage.doLogin (login.page.ts:103)
at Object.eval [as handleEvent] (LoginPage.html:8)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)
at core.js:22046
at SafeSubscriber.schedulerFn [as _next] (core.js:13527)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)

I'm getting this error when i call this.dismissLoader(); and here is my login.page.ts

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

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

      loginFail: boolean = false;
      errorMessage: string = '';
      loading: any;

      constructor(
      private router : Router,
      private loadingController: LoadingController) { }

      ngOnInit() { 
        this.menu.enable(false);
      }

    doLogin(username:string, password:string){ 
        this.showLoader();   
        if(username==='admin' && password==='admin'){
              this.dismissLoader();
              this.router.navigate(['/home']);
        } else{
              this.loginFail = true;
              this.errorMessage = "Login failed";
              this.dismissLoader();
          }
    }
    async showLoader() {
       this.loading = await this.loadingController.create({
         message: 'Please wait...',
         spinner: 'crescent'
       });
     this.loading.present();
    }

    dismissLoader() {
      this.loading.dismiss();
    }

Can somebody help me?

Answer 1

@Component({
    selector: 'exapmle-component',
    templateUrl: './exapmle-component.html',
    styleUrls: ['./exapmle-component.scss']
})
export class ExampleComponent {

    public loading: HTMLIonLoadingElement;

    constructor(
        public loadingCtrl: LoadingController
    ) { }

    public async createLoading(): Promise<boolean> {
        if (this.loading) {
            this.loading.dismiss();
        }

        const loadingOptions: LoadingOptions = {
            animated: true,
            backdropDismiss: false,
            showBackdrop: true,
            spinner: 'bubbles',
            message: 'Hello'
        };

        this.loading = await this.loadingCtrl.create(loadingOptions);
        this.loading.present();
        return true;
    }

    public async dismissLoading(): Promise<void> {
        if (this.loading) {
            this.loading.dismiss();
        }
    }

    public async submit(): Promise<void> {
        await this.createLoading();

        // Logic

        this.dismissLoading();
    }
}

Answer 2

Its in loading Controller

this.loadingController.dismiss()

refer similar question also

Answer 3

try this:

doLogin(username: string, password: string) {
const loading = await this.loadingController.create({
    message: 'Please wait...',
    spinner: 'crescent'
  });
  loading.present().then(() => {
    if (username === 'admin' && password === 'admin') {
      loading.dismiss();
      this.router.navigate(['/home']);
    } else {
      this.loginFail = true;
      this.errorMessage = "Login failed";
      loading.dismiss();
    }
  }
}