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

GitHub Integration with Marketplace Apps

In GitHub we have services that integrate with GitHub which can help you do anything from enabling c...

Read More >

NODE AFFINITY

The k8s node affinity feature is to ensure pods are hosted on a particular node. As mentioned in pre...

Read More >

DevOpSmartBoard - Org Level Reports Part 1

The Org Level Reports is one of the features in the DevOpSmartBoard which gives you an overview of a...

Read More >

Accelerating Digital Transformation with GitHub

Hi All, in this blog I would like to share few insights on how you can leverage GitHub for your deve...

Read More >

Introduction on SignalR

Introduction on SignalRReal–Time Web ApplicationThe real-time web is a set of technologies tha...

Read More >

What is ingress and what are the components of it?

Ingress is a resource, which exposes the http and https from external sources to the services within...

Read More >

Microsoft Azure : Mobile Services - Xamarian.Android with .Net

NOTE: Microsoft Azure recommends Azure App Service Mobile Apps for all new mobile backend deployment...

Read More >

DevOpSmartBoard - User Capacity

Capacity is the amount of time a team member has to work on the requirement in each sprint. It is im...

Read More >

Configuring Azure DevOps Server Proxy

In this blog we will discuss about the Azure DevOps Proxy Server. Azure DevOps Server Proxy distribu...

Read More >

Parallel Execution using Selenium Webdriver and TestNG

While testing a web application it is very important to test the application on different browsers. ...

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