Easy & Reusable Confirmation Functionality in Angular

Using confirmation dialogs is a well-known technique web applications employ to prevent users from performing actions that they didn’t really intend to do.

A typical example is when a user wants to delete an entity, we’ll present a dialog to confirm the deletion. Most apps seem to use a modal that takes the entire screen. Modals of this kind can be verbose and intimidating. In this article, I want to show you how to create a more compact and cleaner solution, and how to make it reusable. Here’s our final result:

Let’s create a component that we can use every time we need to display a confirmation dialog.

To create the popover, I’ll use a neat library from ngneat — helipoper:

ngneat/helipopper

After the installation, create a component named confirm with the following code:

First, we create the template that will be used inside our popper. Next, upon click, we open the popper, passing the host element and a reference to our template. Finally, when the user confirms the action, we emit the confirm event. Now, we can use it anywhere we need it:

We can make the component even more generic by having the action confirmation string entered as an input (the delete confirmation can be the default value). That way, we can also display the confirmation modal for any action we want to double-check with the user.

If UX/UI insist on using modals, you can create the same reusable component and use a modal component instead.

🚀 In Case You Missed It

Here are a few of my open source projects:

• Akita: State Management Tailored-Made for JS Applications
• Spectator: A Powerful Tool to Simplify Your Angular Tests
• Transloco: The Internationalization library Angular
• error-tailer — Seamless form errors for Angular applications
• Forms Manager: The Foundation for Proper Form Management in Angular
• Cashew: A flexible and straightforward library that caches HTTP requests
• Error Tailor — Seamless form errors for Angular applications

And many more!

Follow me on Medium or Twitter to read more about Angular, Akita and JS!