Angular CanDeactivate Router - Blogs
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

Correction and Cancelation of Posted Documents in NAV 2015

This feature is one with which we have simplification of user interface and faster work, but current...

Read More >

Bugzilla to TFS Migrator (Part 3 of 4) – Configuration

This is the third part of the Bugzilla to TFS Migrator blog series covering the configuration of the...

Read More >

Bugzilla to TFS Migrator (Part 4 of 4) - Migration

This is the final part of the Bugzilla to TFS Migrator blog series covering the actual steps of migr...

Read More >

Displaying Postscript text and Vector images on PDF in C#.net using Imageglue

Postscript is a language used for creating vector Images,Vector images are made up of many scalable ...

Read More >

Mobile Apps

There are mobile applications and then there are Applications done by Canarys. Smart phones and tabl...

Read More >

Avoid These 14 Subject Line To Get A Prospect

A blog which highlights on email subject line that most people after reading gives up from opening t...

Read More >

Creating Apps Using Phonegap Framework in IOS

Creating apps for different operating system is not a reliability so for reducing developr work for ...

Read More >

How to check network reachability in iOS

What is network reachability? Now, you are all set to program your app on the ios device? Here is on...

Read More >

Share

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

Sign Up

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Text/HTML
Contact Us
  • *
  • *