Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic 4 prevent/disable device hardware backbutton

I'm using angular routing(@angular/router) for ionic 4 project to disable the device back-button in ionic 4 prevent-default is not working below is my code in

app.component.ts

    this.platform.backButton.subscribe(() => {
        if (this.router.url === '/Login') {
          this.util.presentAppExitAlert();
        } else {
          // event.preventDefault();
          console.log("invoing url ", this.router.url);
        }
      });
    });

i am not able to disable the device back-button any help here

like image 769
Mohan Gopi Avatar asked Mar 21 '19 06:03

Mohan Gopi


3 Answers

initializeApp() {
    this.platform.ready().then(() => {
      this.platform.backButton.subscribeWithPriority(9999, () => {
        document.addEventListener('backbutton', function (event) {
          event.preventDefault();
          event.stopPropagation();
          console.log('hello');
        }, false);
      });
      this.statusBar.styleDefault();
    });
  }
like image 169
Davide Martina Avatar answered Sep 18 '22 06:09

Davide Martina


I found out how to undo it (give back button previous functionality):

Your observer is pushed to the this.platform.backButton.observers array. So you just have to pop the last element of the list:

this.platform.backButton.observers.pop();

Hope it helps somebody.

like image 20
elnezah Avatar answered Sep 21 '22 06:09

elnezah


05-02-2020

This works for me.

app.component.ts

  

async initializeApp(): Promise<void> {
    await this.platform.ready();
   
    this.platform.backButton.subscribeWithPriority(1, () => { // to disable hardware back button on whole app
    });

  }
like image 27
Sampath Avatar answered Sep 17 '22 06:09

Sampath