Warn user before leaving web page with unsaved changes angular

Question

I have some pages with forms in my application.

How can I secure the form in such a way that if someone navigates away or closes the browser tab, they should be prompted to to confirm they really want to leave the form with unsaved data?

Answer 1

This looks like an ideal case for using the CanDeactivate Guard. I've created a video on it available on YouTube that you can watch and implement.

But this would only work with navigating away from the route. Not sure if it would work on Window Close.

So for that, you can use window.onbeforeunload. Here's a StackOverflow thread on the same that you can read to have a look.

Hope this helps.