27Dec
⚡ Angular — Protect your unsaved data
Have you ever filled a form and mistakenly closed that tab or went back without completing the process and lost all those data? Prevent your users from experiencing the same.
Angular provides CanDeactivate
route guard, which prevent navigating from one route to another, unless the given condition becomes truthy.
Imagine a simple dashboard, having a form which helps User registration.

If the form is filled or half filled (dirty) and if the Admin navigates to some other route mistakenly, then the form entries will get lost and that Admin have to re-enter all the entries again to complete the registration.
In-order to prevent that, we can show a confirm popup, where Admin states that he is navigating with his knowledge, if not the navigation will be prevented.
As said earlier, we can achieve this using CanDeactivate
route guard.
Create a service which implements CanDeactivate, which asks for canDeactivate()
method which in-turn takes an argument component
as the component which we want to implement CanDeactivate. And register your service in the provides array in the respective module.

CanDeactivate implementation
Simple bootstrap form
@ViewChild(‘userForm’) userForm: NgForm;
inside the component, through which we can be able to check whether the form is dirty (value entered) or not.
Here, if the Admin navigates from the route which has filled form to another, confirm pop-up will be appeared.
Preview
In this way, we can prevent our user from losing their data.
In this example anyway we have only two inputs. It won’t be much tedious to re-enter the data again. Consider a form with 10+ or 20+ inputs. It will be very painful if that is the situation. Hope this helps 💖
Related
In this blog, I would like to explain about PIVOT and UNPIVOT operator in SQL Server. The PIVOT oper...
Read More >
This article will explore about the SharePoint introduction, its version and features.SharePoint is ...
Read More >
Plugging for Cloud, Right or Wrong?Cloud computing continues to be one of the most advertising topic...
Read More >
Working knowledge on HTML5 Working knowledge on JQuery Good written and oral communication Quick le...
Read More >
Online help page is a web page which displays information in a web browser when user presses the key...
Read More >
Service Broker SQL Server Service broker provides asynchronous queuing functionality to SQL Ser...
Read More >
Canarys has been a prominent Microsoft Dynamics NAV partner since the inception of the practice. We ...
Read More >
In this blog post we will learn what is a closure, it's syntax and types of closures in Swift with e...
Read More >
Date : 11th Feb 2016 | Day : Thursday | Time : 11:30 AM EST | Duration : 1 HourREGISTER yourse...
Read More >
Share