ionic3-android-backbutton
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.15 • Public • Published

    Ionic 3 Android Back Button Handler

    NPM version

    Installation

    npm i ionic3-android-backbutton
    

    Adding to project

    Update your app.module.ts as follows:

    import {BrowserModule} from '@angular/platform-browser';
    import {ErrorHandler, NgModule} from '@angular/core';
    import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
     
    import {MyApp} from './app.component';
    import {HomePage} from '../pages/home/home';
     
    import {BackbuttonModule} from "ionic3-android-backbutton";
     
    @NgModule({
        declarations: [
            MyApp,
            HomePage
        ],
        imports: [
            BrowserModule,
            IonicModule.forRoot(MyApp),
            BackbuttonModule.forRoot()
        ],
        bootstrap: [IonicApp],
        entryComponents: [
            MyApp,
            HomePage
        ],
        providers: [
            StatusBar,
            SplashScreen,
            {provide: ErrorHandler, useClass: IonicErrorHandler}
        ]
    })
    export class AppModule {
    }
     

    Usage

    most cases where this plugin is useful is to prevent the user from exiting the app before a certain condition is fulfilled, this is where the plugin gets useful especially when using the registerBeforeExit() method. See the example below.

    these methods act globally and will affect the whole app so you need to unregister them manually after you don't need them.

    Example1:

    make sure user sees an alert before he leaves the app

    import {Component} from '@angular/core';
    import {AlertController, Platform} from 'ionic-angular';
    import {StatusBar} from '@ionic-native/status-bar';
    import {SplashScreen} from '@ionic-native/splash-screen';
     
    import {HomePage} from '../pages/home/home';
    import {Backbutton} from "ionic3-android-backbutton";
     
    @Component({
        templateUrl: 'app.html'
    })
    export class MyApp {
        rootPage: any = HomePage;
     
        constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public bb: Backbutton, public alertCtrl: AlertController) {
            platform.ready().then(() => {
                statusBar.styleDefault();
                splashScreen.hide();
                this.bb.registerBeforeExit(() => {
                        let alert = this.alertCtrl.create({
                            title: 'You are now going to exit the app',
                            buttons: ['OK']
                        });
                        alert.present();
                        alert.onDidDismiss(() => {
                            this.bb.exit()
                        });
                        return false;
                })
            });
        }
    }

    Example 2:

    make user press back button a few times before being able to leave the page.

    import {Component} from '@angular/core';
    import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
    import {Backbutton} from "ionic3-android-backbutton";
     
    @IonicPage()
    @Component({
        selector: 'page-article',
        templateUrl: 'article.html',
    })
    export class ArticlePage {
     
        bbcounter = 5;
     
        constructor(public navCtrl: NavController, public navParams: NavParams, public bb: Backbutton, public toastCtrl: ToastController) {
        }
     
        ionViewDidEnter() {
            this.bb.registerDefaultAction(() => {
                this.bbcounter --;
                if(this.bbcounter > 0){
                    this.toastCtrl.create({
                        message: 'Press back '+this.bbcounter+' more times',
                        duration: 3000,
                        position: 'bottom'
                    }).present();
                    return false; //cancel backbutton action
                } else {
                    this.bb.unregisterAction('default'); //unregistering function because we won't need it anymore
                    return true; //allow backbutton action
                }
            })
        }
     
    }
     

    Methods

    registerDefaultAction(f: Function)

    register the function to be called whenever the back button is pressed. If your function returns true, the default back button behavior with be triggered, if your function returns false the default behavior will be canceled.

    registerBeforeExit(f: Function)

    register the function to be called whenever the app is about to exit upon hardware back button press. If your function returns true, the default back button behavior with be triggered and your app will exit, if your function returns false the default behavior will be canceled.

    unregisterAction(type: string){

    type Description
    default unregister registerDefaultAction()
    beforeexit unregister registerBeforeExit()

    unregisterAll()

    reverts back button default behavior.

    back()

    emulate android back button (including potentially exiting the app).

    exit()

    exit the app.

    Keywords

    none

    Install

    npm i ionic3-android-backbutton

    DownloadsWeekly Downloads

    19

    Version

    0.0.15

    License

    MIT

    Unpacked Size

    21.3 kB

    Total Files

    15

    Last publish

    Collaborators

    • heidji