Close the app by hardware back button on Ionic 4

I’m trying to make my app close on back button
I found this code in github

 //Called when view is loaded as ionViewDidLoad() removed from Ionic v4
  ngOnInit(){
    this.initializeBackButtonCustomHandler();
  }
 
 
  //Called when view is left
  ionViewWillLeave() {
    // Unregister the custom back button action for this page
    this.unsubscribeBackEvent && this.unsubscribeBackEvent();
  }
 
  initializeBackButtonCustomHandler(): void {
    this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999,  () => {
        alert("back pressed home" + this.constructor.name);
    });
    /* here priority 101 will be greater then 100 
    if we have registerBackButtonAction in app.component.ts */
  }

It works , but on all pages


I want to restrict it only on home page


I used this.constructor.name == HomePage but not work too

This (IMHO) is a bad idea for two reasons, one technical and one philosophical:

Technically, any code that depends on the string names of classes or methods will break under minification, so you will end up with an app that works great until you try to build it for production, and then will mysteriously start failing.

Philosophically, the principle of separation of concerns dictates that all code directly involving HomePage should actually be in HomePage. Otherwise, the program becomes much harder to read, test, debug, and maintain.

So, what I would do is to subscribe to the back button in HomePage's ionViewDidEnter and unsubscribe in its ionViewWillLeave, ensuring that that subscription is active only when HomePage is.

1 Like

Subscribe to the Back Button in the ngOnInit Methode of your HomePage and unsubscribe when the Page is destroyed (ngOnDestroy).

1 Like

It works perfectly
Thanks

constructor(public Platform: Platform, ) { this.subscribe = this.Platform.backButton.subscribeWithPriority(666666, ()

  => {

  if (this.constructor.name == "HomePage") {

    if (window.confirm ("Do you wanna exit the app?")) {

      navigator ["app"].exitApp().

    }

  }

});

}

i am not sure whtas wrong with my code

  • as described in the post you replied to, it will break under minification (i.e. when you build for production)
  • it breaks naming conventions by having properties in PascalCase
  • it eschews nice Ionic dialogs for ugly browser ones
  • it’s in the wrong class
  • it should be registered in an enter lifecycle event and torn down in an exit one
  • it uses == for comparison, which is pretty much an unmitigated disaster

you need to subscribe it in ionViewDidEnter
and then unsubscribe in ionPageWillLeave

its giving error, can give me your page as an example and see how you have implemented these keywords

ionViewDidEnter() {

    this.initializeBackButtonCustomHandler();

  }

initializeBackButtonCustomHandler(): void {

    this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999,  () => {

 

        if(window.confirm('Do you want to exit the app?'))

        {

          navigator['app'].exitApp();

        }

    });


  }


    ionViewWillLeave() {

      this.unsubscribeBackEvent.unsubscribe();

    }

 

}

Thanks, No imports right

im doing it i the constructor and its not working,

you should declare it
public unsubscribeBackEvent: any;
That’s all I have