(Ionic 5) Override ion-back-button logic to show confirm message before leaving a page

Ionic Framework
1

Hi guys! Is there an easy way to prevent page popping when pressing ion back button? I’d like to show a confirmation dialog to user before leaving page. I’m using Ionic 5.2.2 and trying this, but not working:

component.html
<ion-back-button *ngIf=“canGoBack” (click)=“this.backButtonClicked($event)”>

component.ts
public backButtonClicked(event) {

event.preventDefault();

event.stopPropagation();

event.stopImmediatePropagation();

}

2

Up! Nobody have this problem? Very strange for me…

3

I would solve it by using the Angular’s CanDeactivate Guard. I found this Tutorial after googling: https://www.concretepage.com/angular-2/angular-candeactivate-guard-example . Try it out, if you have questions, ping me :blush:

1 Like
4

Thank you so much. I didn’t think about CanDeactivateGuard that is specific for my scope :slight_smile: