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.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.