Angular 5 prevent or warn user before back button click

So I have a SPA application built in angular, now my issue is when a user is on my app if they press the (browser) back button, sometimes if data was sent on the previous page it can cause errors and sometime there is state that when refreshed goes away. Now Is there a way I can warn a user before going back or simply not allow a user to go back??

I have tried to do this in my index.html

<script>
window.onbeforeunload = function()
return "Message";
;
</script>


but it looks like this no longer works on newer browsers, I found a similar question here but its from a few years ago and I've tried a few of there solutions and none of them worked..

what is the best way in 2018 to handle this situation??

Thanks

canDeactivate()

1 Answer
1

You can allow/prevent navigating to a route with a canActivate route guard, and you can allow/prevent navigating away from a route with a canDeactivate route guard (see the Angular documentation).

canActivate

canDeactivate

If you want to prevent a user from going back to a page that has already been visited, use a canActivate route guard. In this stackblitz, a confirmation is asked before going back to the Login page. As a bonus, it also contains an example of a canDeactivate route guard for the Home route.

canActivate

Login

canDeactivate

Home

Here is the code for the canActivate route guard of the Login route:

canActivate

Login

activate-guard.ts

import Injectable from "@angular/core";
import CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot from "@angular/router";
import Observable from "rxjs";
import LoginActivateService from "./login-activate.service";

@Injectable()
export class ActivateGuard implements CanActivate boolean




app-routing.module.ts

...
imports: [
RouterModule.forRoot([

path: 'login', component: LoginViewComponent,
canActivate: [ActivateGuard]
,

path: 'home',
component: HomeViewComponent,
canDeactivate: [DeactivateGuard]
,
...
])
],


canDeactivate

canActivate

canActivate

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.