Disable android device back button until ionic LoadingController close

Question

We are worked on ionic native mobile app.In application have more then 10 page.

Loader code: //LoaderService

    this.loader = this.loadingCtrl.create({
          content: "Loading",
          //duration: 2000,
        });
        return this.loader;
this.loader = this.LoaderService();
this.loader.present();//Loader start
his.loader.dismiss();//Loader Stop

Loader we are using every page .If loader is open in that time user click back button, Back button function working it's going to other page loader also going to next page .

We need if loader open back button code should stop working

Back button code app.component.ts

if (this.platform.is('android')) {
        this.platform.registerBackButtonAction((e) => {
            //my code
          });
        }

We tried one way like put flag true while loader present.while dismiss set flag false.But we can't change every page.Give me any idea for that

I'm using this location.onPopState(() => { window.history.forward(); }); from import { PlatformLocation } from '@angular/common'; and private location: PlatformLocation in the constructor. But mine is a web application not sure if it work for ionic. — Swoox

Duannx Duannx · Accepted Answer · 2018-02-22T11:07:28

Just define avarible to store whether loading is presenting or not and wrap present and dismiss function in your service

LoaderService

loader: any;
isShowLoading: false;
constructor(){
   this.loader = this.loadingCtrl.create({
       content: "Loading",
   });
   this.loader.onDidDismiss(()=>{
        this.isShowLoading = false; //loader dismissed
    })
}

showLoading(){
    this.loader.present();
    this.isShowLoading = true;
}

hideLoading(){
    this.loader.dismiss();
    this.isShowLoading = false;
}

SomeComponent

this.platform.registerBackButtonAction((e) => {
     return !this.loaderService.isShowLoading
});

Disable android device back button until ionic LoadingController close

1 Answers