Warn user of unsaved changes before changing tabs on a page

Question

On my Angular2 page, I have data split among 3 different tabs. These 3 tabs show data from 3 different sections of the same model. Each tab has save data option. How will I warn user of unsaved changes if he goes to a different tab without changing data?

Please note that this page has a single url and there are no specific routers for each tab.

Do I really need individual routers for each tab and lifecycle callback CanDeactivate to handle this? Are there any other options? I don't want to create individual routers as these 3 tabs are on the same page.

Answer 1

I assume that you can react to the click event on the tab? That seems like the most likely place to add code to determine if the user made changes that need to be saved first.

I did a sample edit application with tabs, but I allow updating any tab without saving changes first. The app does require the user to save before navigating out of the edit. If you are interested, you can find the code for it here: https://github.com/DeborahK/Angular-Routing/tree/master/APM-Final