Ionic 2 device back button prevent app exit in tabs

Question

I am new to ionic framework.

I am facing a problem regarding ionic-2 app tabs, I have 3 tabs on my app view one is discovery and others are people and messages … The problem I am having is that when I am on message and people tabs and from my phone back button press I just simply exit from my app … what I want is when I click on other tabs I simply go to my home page which is discovery page and from there if I press back then I exit the app … Any one has any idea about this please let me know I will be thankful to you …

you can configure hardware back button in ionic https://stackoverflow.com/questions/42151944/ionic-2-how-to-handle-the-hardware-back-button-which-checks-confirmation-of-exi — harsh zalavadiya, Apr 16 '18 at 13:56

score 0 · Answer 1 · answered Apr 16 '18 at 14:16

you can resolve this by registering a new backButton-Action. In one of my projects, I used that to create an Alert, to prevent users from closing the App. You can ask the navCtrl on which page you are right now and then redirect the user, instead of closing the App.

Here is a little Snippet which should lead you to the solution:

this.platform.registerBackButtonAction(() => {
    let nav = this.app.getActiveNav();
    if (...){ // Ask what the current page is.
      // use setRoot on navCtrl to redirect to your preferred page
    }else{
      this.platform.exitApp();
    }
  });

Dmitry Stepanov · Accepted Answer · 2018-04-17T13:24:14.930

0

I solve that problem this way:

import { Navbar, Platform } from 'ionic-angular';
import { ViewChild } from '@angular/core';

export class Some_Page_With_Your_Three_Tabs {

    public backButtonAction: any;

    tab1Root = MainTab;        // your first tab
    tab2Root = MessagesTab;    // your second tab
    tab3Root = PeopleTab;      // your third tab

    @ViewChild(Navbar) navBar: Navbar;

    constructor(public platform: Platform, public navCtrl: NavController, public navParams: NavParams) {
    }

    ionViewDidEnter() {
        this.backButtonAction = this.platform.registerBackButtonAction(() => { 
            this.customHandleBackButton();
        }, 10);
        this.navBar.backButtonClick = (e: UIEvent) => { 
            this.customHandleBackButton();
        };
    }

    private customHandleBackButton(): void {
        if (weCanLeave) {
            this.navCtrl.pop({ animate: false });
        } else {
            return;
        }
    }
}

edited Apr 17 '18 at 13:24

answered Apr 17 '18 at 13:17

Dmitry Stepanov

366
1
7

Note; remove the listener when navigating to other pages. – JoeriShoeby Apr 18 '18 at 16:11
i have't tested it yet i am going to – usman Apr 19 '18 at 05:53
if (weCanLeave). What is this ? @Dmitry – usman Apr 19 '18 at 07:14
i am importing "Nav" instead of "Navbar" so what should i use in "this.navBar.backButtonClick" i don't see any function of backButtonClick in nav ... @Dmitry – usman Apr 19 '18 at 07:26
You need to import exactly "Navbar". In docs you can read : "**Navbar** acts as the navigational toolbar, **which also comes with a back button**." https://ionicframework.com/docs/api/components/toolbar/Navbar/ @usman – Dmitry Stepanov Apr 19 '18 at 07:32
Thanks dear for the help ... @Dmitry – usman Apr 19 '18 at 08:12

Ionic 2 device back button prevent app exit in tabs

2 Answers2