I have a mat-tab-group where each tab has a component with its own state, I'm handling the status of the component with a hasChanges property which tells me if the component has any changes pending to be saved.
I'm trying to show the user a dialog or alert if they decide to move to another tab while having unsaved changes, so I can prompt them to either save those changes or discard them; however, the MatTabChangeEvent only has the information of the tab I'm trying to move to, and event performs the action before running any code I write on the event handling.
Is there a way to run my code before the tab selection occurs?
Some of my code:
onTabChanged(event: MatTabChangeEvent) {
const i = event.index;
if (this.reportPage.hasChanges) {
const dialogRef = this.dialog.open(DialogConfirmComponent);
dialogRef.afterClosed().subscribe(res => {
if (res) {
console.log(res);
} else {
this.getPage(i, this.report.pages[i].id);
}
});
}
}