X
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.

1

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.

 

angular canDeactivate router

CanDeactivate implementation3Simple 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.

3Preview

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

DevOpSmartBoard- Multiple Team Capacity

DevOpSmartBoard -The Ultimate End-To-End and One Stop Dashboard solution for all the reporting needs...

Read More >

iOS qrcode generator

Have you heard of QR Codes yet? Here is a quick introduction:- QR is short for Quick Response . It i...

Read More >

Autofill RecVariable Name in DynamicsNAV 2015

I discovered something quite interesting couple of week back and I thought it was worth sharing.When...

Read More >

How to build a client side Repeater Using jQuery and ASP.NET AJAX

jTemplate is a template engine plug-in for jQuery and is commonly used to display tabular data ...

Read More >

HTML Parser

Are you looking for any HTML Parser?Want to traverse through HTML DOM elements?Want to read properti...

Read More >

Canarys is a finalist for 2014 Microsoft ALM partner of the year award from INDIA

Bangalore, Karnataka, India — May 29, 2014 — Canarys, today announced it has been named ...

Read More >

Selenium Locators

Selenium webdriver uses locators to find the web elements on web page. The following are the list of...

Read More >

Onsite Support Project on NAV 2013 R2 in Malaysia for the second consecutive year

At Kuala Lumpur, Malaysia, Canarys Dynamics team is providing technical support for Microsoft Dynami...

Read More >

New Features in Sql Server 2008

Introduction:Many new developer features were introduced in SQL Server 2008 database. This tutorial ...

Read More >

Webinar US - Plugging for Cloud, Right or Wrong?

Plugging for Cloud, Right or Wrong?Cloud computing continues to be one of the most advertising topic...

Read More >

Share

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Text/HTML
Text/HTML
Contact Us
  • *
  • *