You can implement canDeactivate using typescript like
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { ViewthatyouwantGuard } from './path to your view';
@Injectable()
export class ConfirmDeactivateGuard implements CanDeactivate<ViewthatyouwantGuard> {
canDeactivate(target: ViewthatyouwantGuard) {
if (target.hasChanges) {
return window.confirm('Do you really want to cancel?');
}
return true;
}
}
// hasChanges - function in 'ViewthatyouwantGuard' which will return true or false based on unsaved changes
// And in your routing file provide root like
{path:'rootPath/', component: ViewthatyouwantGuard, canDeactivate:[ConfirmDeactivateGuard]},
// Last but not least, also this guard needs to be registered accordingly:
@NgModule({
...
providers: [
...
ConfirmDeactivateGuard
]
})
export class AppModule {}
Source: https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html