Within my mat-tab-group, each tab contains its own component with a unique state. I utilize a hasChanges property to track if there are any pending changes in the component that need to be saved.
I am currently facing the challenge of notifying the user with a dialog or alert when they attempt to navigate to another tab without saving their unsaved changes. The issue lies in the fact that the MatTabChangeEvent only provides information about the tab being navigated to, and executes the action before allowing me to run my custom code for handling the event.
Is there a method for executing my code prior to the tab change taking place?
Snippet from my current implementation:
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);
}
});
}
}