LoaderController Ionic 4 Hide from Component or Page

manpreet Best Answer 2 years ago

In the version of Ionic 3 I had the following service to manage the Loading within the app:

import { Injectable } from '@angular/core';
import { LoadingController, Loading } from 'ionic-angular';
import _ from 'lodash';

@Injectable()
export class SpinnerService {

    private _spinner: Loading;

    constructor(
        private _loadingCtrl: LoadingController,
    ) { }

    public show(message?: string) {
        this._spinner = this._loadingCtrl.create({
            spinner: 'crescent',
            showBackdrop: true
        });
        this._spinner.setContent(message ? message : '');
        this._spinner.present();
    }

    public hide() {
        this._spinner.dismiss();
    }
}

And this worked fine, however, for the migration of Ionic 4, I can not find a way to recreate this. I tried to do the same with LoadingController but when calling the hide() function I find the error that the spinner is not defined

Error: Uncaught (in promise): TypeError: Cannot read property 'dismiss' of undefined

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {

  private spinner: any;

  constructor(
    public loadingController: LoadingController
  ) { }

  async show() {
    this.spinner = await this.loadingController.create({
      message: 'Hellooo'
    });
    await this.spinner.present();
  }

  async hide() {
    return await this.spinner.dismiss();
  }
}

manpreet 2 years ago

You can hide it simply using the dismiss() method from the LoadindController (and not the returned value from the create() method).

async hide() {
  await this.loadingController.dismiss();
}