Angular 14.2.7 Unsaved Changes Guard: After Canceling Navigation, Page Becomes Empty

I am working with Angular and have implemented a guard to prevent losing unsaved changes when navigating. However, when I click on a tab in the side menu, navigation starts, and the confirmation dialog is displayed. After clicking "Cancel," the page stays on the same route, but it becomes empty instead of staying on the form.

Here is my implementation:

Guard Code:

export interface CanComponentDeactivate {
unsavedChanges?: boolean;
}

@Injectable({
providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(
component: CanComponentDeactivate
): Observable<boolean> | Promise<boolean> | boolean {
if (component.unsavedChanges) {
return window.confirm('You have unsaved changes. Do you really want to leave?');
}
return true;
}
}


Routes in trips module:

{
path: 'add',
component: TripPageComponent,
data: {
right: Right.CreateTrip
},
canDeactivate: [UnsavedChangesGuard]
},
{
path: 'edit/:id',
component: TripPageComponent,
data: {
right: Right.UpdateTrip
},
canDeactivate: [UnsavedChangesGuard]
}



TripPageComponent:

@Component({
selector: 'm-trip-page',
templateUrl: './trip-page.component.html',
})
export class TripPageComponent implements OnInit, CanComponentDeactivate {
@ViewChild(TripComponent) tripComponent: TripComponent;
unsavedChanges = false;

constructor() { }

ngOnInit(): void {}

onUnsavedChanges(status: boolean) {
this.unsavedChanges = status;
}
}



HTML in TripPageComponent:

<m-trip (unsavedChanges)="onUnsavedChanges($event)"></m-trip>



Child Component (TripComponent):

@ViewChild('tripForm') tripForm: NgForm;

ngAfterViewInit() {
this.tripForm.valueChanges?.subscribe(() => {
this.unsavedChanges.emit(this.tripForm.dirty);
});
}

ngOnInit() {
this.unsavedChanges.emit(false);
}



Console Logs for Navigation Events:

this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
console.log('Navigation Start:', event);
} else if (event instanceof NavigationEnd) {
console.log('Navigation End:', event);
} else if (event instanceof NavigationCancel) {
console.log('Navigation Cancel:', event);
} else if (event instanceof NavigationError) {
console.log('Navigation Error:', event);
}
});



Issue: When I click on a tab in the side menu, the navigation starts, and the confirmation dialog appears. If I click "Cancel," the URL stays the same (i.e., the correct route), but the page becomes empty instead of staying on the form.

Any help or suggestions on how to fix this issue would be appreciated.

When navigate from the form I expect if the form has an unsaved changes then when click on cancel the it stays in the form tab without being empty

Continue reading...