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

Page Object Model

Automation Testing with Selenium using Page Object ModelPage Object Model (POM)Writing selenium scri...

Read More >

Create custom project templates in Visual Studio

Visual studio installation comes with the various predefined project templates, and we can use one o...

Read More >

To recover the space occupied by TFS 2010, after deleting the artifacts.

When you delete the team project or project artifacts from TFS 2010, the TFS collection database won...

Read More >

Customer Feedback

Your feedback is important to us. Please share your experience working with Canarys & the journe...

Read More >

WSUS, SCCM & MP Server 2008 WebDAV error

Recently when revisiting an internal SCCM deployment I found that the WSUS integration had stopped w...

Read More >

Introducing Azure DevOps Earlier (VSTS)

Microsoft recently announced Azure DevOps and an evolution of Visual Studio Team Services (VSTS) whi...

Read More >

Prerequistes for installing TestNG Framework in eclipse IDE

TestNG Introduction TestNG is an open source automated testing framework, where NG of Test...

Read More >

Managing your text messaging with Manage My SMS

Have you ever been bothered by the bank notifications, payment reminders, lottery wins on your mobil...

Read More >

Webinar-subscribe

Subscribe using the form below to get updates on our future webinars!!! We will ensure you to send u...

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
Contact Us
  • *
  • *