Close the app by hardware back button on Ionic 4

Ionic Framework
1

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

2

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
3

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

1 Like
4

It works perfectly
Thanks

5

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

6
  • 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
7

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

8

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

9 
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();

    }

 

}
10

Thanks, No imports right

11

im doing it i the constructor and its not working,

12

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