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

Animation with Xamarin Forms

In this Article I am going to show you how we can add animation in our Xamarin Forms Application.

Read More >

How to use TFS 2012 Team Build for Visual Basic 6

Here is a process to build your VB6 projects in Team foundation Server 2012. 1. Have a copy of ...

Read More >

Microsoft Dynamics NAV 2013 R2 Multitenancy deployment

Multi-tenancy is a software architecture in which a single instance of the application can...

Read More >

What is Synchronization? Handling Synchronization in Selenium WebDriver using C#:

Synchronization meaning: when two or more components involved to perform any action, we expect these...

Read More >

Microsoft Azure: Implementing Internet Facing Load Balancers using Azure Resource Manager

Howdy Folks!I was exploring Network Load Balancer in Azure Resource Manager and found out that you c...

Read More >

How to Remove the Departments Action Button in NAV 2015

Some customers may not want to use Departments menu available. We need to have some option to remove...

Read More >

Microsoft Dynamics ERP & CRM Solutions

Canarys has been a prominent Microsoft Dynamics NAV partner since the inception of the practice. We ...

Read More >

What’s New On Microsoft Dynamics NAV 2018

As most of us know that Microsoft NAV 2018 has released a great feature about API in 2018, to suppor...

Read More >

3 Layered Architecture

IntroductionHere in this article, I would like to cover the typical three layer architecture in C# ....

Read More >

Share

Post a Comment

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Contact Us
  • *
  • *