Tutorial Confirmation Dialog Box Using Angular 4 And Ng2-confirmations

If you often use the confirm() method in javascript, how to apply to angular 4 is slightly different. Using the ng2-confirmations plugin makes it easy for you to create and implement confirm() window on the angular. Follow the simple tutorial below to create confirmation dialog box in your angular 4 application.

What is confirmation dialog box?

I summary from w3schools.com site, Method confirm() is used to display a dialog box with the specified message, along with OK and Cancel button. In application implementation, dialog box confirmation is often used if you want the user to verify a request.

Another article: Tutorial Angular 4 How To Use Toast Notifications With Jaspero

By default confirm() box returns true if the user clicks “OK,” and false otherwise. How to use confirmation box on angular?

Apply a confirm() Method to Angular 4

In this tutorial, I use a plugin made by jaspero that is ng2-confirmations. The advantages of this plugin are We can customize the confirmation box that will create. Some modifications we can do include: overlay, show close button, confirm text and decline text. I think this plugin is simple but powerful.

The tutorial uses ng2-confirmations on angular 4

Tutorial Confirm Box Angular 4 And Ng2 Confirmations Min

To use ng2-confirmations on angular 4, you only follow the simple steps below

1. install ng2-confirmations using npm

2. import JasperoConfirmationsModule in app.module.ts

3. Copy and paste the following element in the root component (if using angular-cli, you can paste it in app.component.html)

4. Make 3 pieces of interface as follows

resolve-emit.ts and copy the following script

confirm-emit.ts and copy the following script

confirm-settings.ts and copy the following script

Until the above stage, the preparation of using confirm box on angular 4 has been completed, the next step we will try to apply it

Import the following module on the component that will use the confirmation box

Create parameter options that will be used in the confirmation box with the following script

Add the following code to the constructor

How to use the ng2-confirmations box angular 4 as follows

Its use on angular 4 is like the following motion picture

Tutorial Angular 4 How To User Ng2 Confirmations Jaspero Angular 4 Confirm Box

Another article: Tutorial How To Integrate Angular 4 + Bootstrap 3 For Beginners

Such a simple tutorial may be useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. confirm window is not opening
    I am using angular 4 only. but confirm window is not displaying

  2. Hi Sigit Prasetya Nugroho ,

    This is very nice tutorial. I have implemented in my project and it works fine!

    I want to move the buttons, the No-button to the right, and the Yes-button to the left, that would be nice if it is a setting you can set.
    And maybe also its nice to set the css class name per button also.
    I cant see the close button, but thats not a problem for me, the setting is set to true.
    Thanks for your time.

  3. ‘YES’ button is not displaying,
    only ‘No’ Button is display.
    No console error messagers

  4. Hi Sigit Prasetya Nugroho ,

    This is a very nice tutorial. I have implemented this in my project, it works fine.
    I agree with Ahmad, it would be great to have css class names on buttons. Also i am too not able to see the close button.


Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.