Custom Confirm Component in AngularJS

Confirm Dialogs are extremely common requirement in web applications which requires frequent user actions.

This tutorial shows how to implement a simple reusable confirm component and directive in Angular 4 application using TypeScript. Here we are going to use Bootstrap 4 NgbModule for the confirm dialog box.

Note: This tutorial is not intended to explain the working of Bootstrap Modal Module and its services. We assume user is familiar with the concepts. You can refer: https://ng-bootstrap.github.io/#/components/modal/examples for modal examples.

Implementation
1. Create the component using ng g component components/confirm

confirm.component.ts – component class for Confirm Component
cnfirm.component.html – Defines the layout of the confirm component
confirm.component.spec.ts – unit test class
comfirm.component.css – custom style

2. Create the directive using ng g directive directives/confirm

confirm.directive.ts – Here goes the actual logic for the confirm dialog to work.
confirm.directive.spec.ts – unit test class

CONFIRM COMONENT
Let’s first start with component layout and then we will move to logic.



1. First div specifies the title of the confirm dialog – It’s up to user’s choice to add header for Dialog or not. That’s why we have added a if condition. If title is provided then only header div will be visible.
2. Second div specifies the body of the confirm dialog – Here goes the text for the confirm dialog.
3. Third div specifies the footer – Here goes confirm and cancel buttons. We made confirm and cancel buttons text customizable. If user wants to change the button text, then they need to specify these properties

Here, notice the click action defined for Confirm, cancel and close button.
1. activeModal.dismiss(false)
2. activeModal.close(true)

dismiss and close are the methods of Bootstrap Modal Service and activeModal is the instance of the Modal Service which is defined in component class. You must be wondering why we have used dismiss with false and close with true? So the reason behind this is – true and false helps us in deciding in our parent about the user selection. We will see the usage later in this tutorial.

The component class of our custom confirm dialog.



1. Title – Title of the confirm dialog
2. Text – Confirm dialog text
3. confirmBtnText – Confirm button text (Default value – “Confirm”)
4. cancelBtnText – Cancel button text (Default Value – “Cancel”)
5. activeModal – This is the instance of Bootstrap Modal Service. Its used to close the opened modal from within.

CONFIRM DIRECTIVE
Now let’s start with our core logic for Confirm Dialog.



USAGE
Now, let’s see how we can use our confirm dialog. Suppose, we have a Employee Details Table and there we have a delete button for each row. When user clicks on delete button, we have to show a confirm dialog.



Here we are using our Confirm Dialog Directive appConfirm. As you can see, we need to pass the options to the appConfirm directive. You need to define these options in your component class as shown below.



(confirm)="<your action goes here>" – This indicates the confirm event sent from the confirm directive. You can define your action to be performed on receiving the confirm event. For ex: update the table etc. We can handle the cancel event as well, if we wish to perform any action on cancel button click.

Hope you enjoyed the article. Happy Coding…