Nativescript-angular: How to unregister the android.on registration when component being destroyed.

[liuwei108]

I want to override The Android Back Button so I put:

 android.on(AndroidApplication.activityBackPressedEvent, (args: any) => {
   console.log('back btn taped');
    args.cancel = false;
});

in AppComponent constructor for test purpose. It works, however, I don't know how to unregister this event when I quit app by tapping android back button. I noticed that if I open app again, this event will be called twice.

The document of Android Activity Events doesn't mention how to un-register the android.on, I tried android.off(), doesn't work.

[NickIliev]

@liuwei108 try the following:

let listener: any;

listener = android.on(AndroidApplication.activityBackPressedEvent, (args: any) => {
   console.log('back btn taped');
    args.cancel = false;
});

// and later when we need to unregister e.g. in ngOnDestroy or in some application lifecycle event

android.off(listener)

[liuwei108]

Hi Nick,

Thanks a lot, android.off(listener) works, but not in ngOnDestroy.
I found the ngOnDestroy of root AppComponent even not being called when I click android back button to quit the app. but the weird thing is that the ngOnInit method being called again if I reopen the app.
It seems the Nativescript treat the back button to quit app as to navigate forward from AppComponent to Android HomeScreen.
Even I don't use <page-router-outlet>, this behavior still the same. Is it expected? really looks like a bug..

Regards,
David

[NickIliev]

@liuwei108 we are currently aware and investigating the Angular ngOnDestroy issue.

Meanwhile;e I would recommend using the native mobile lifecycle events

Closing as main issue is resolved and the problem with ngOnDestroy is logged here

[yalva]

Hi Nick

I'm using NS 6

listener = android.on(AndroidApplication.activityBackPressedEvent, (args:any) =>{
args.cancel = false;
console.log("Listener:" + listener)
});

JS: Listener:undefined

What could be the cause for listener to be undefined?

[edusperoni]

The correct way would be:

export class ... {
    callback = (args) => {
        // your code
    }

    ngOnInit() {
       android.on(event, this.callback);
    }
    ngOnDestroy() {
       android.off(event, this.callback);
    }
}

another way would be:

export class ... {

    ngOnInit() {
       android.on(event, this.callback, this);
    }
    ngOnDestroy() {
       android.off(event, this.callback, this);
    }
    callback(args) {
        // callback code
    }
}

Arrow functions keep this references, while normal functions don't, which is why you have to pass the this argument.

[kriefsacha]

I just did android.off(AndroidApplication.activityBackPressedEvent) on ngOnDestroy it works perfectly if someone need