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
To use ng2-confirmations on angular 4, you only follow the simple steps below
1. install ng2-confirmations using npm
1 | npm install --save @jaspero/ng2-confirmations |
2. import JasperoConfirmationsModule in app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 | import { JasperoConfirmationsModule } from '@jaspero/ng2-confirmations'; @NgModule({ declarations: [ AppComponent ], imports: [ JasperoConfirmationsModule, ], providers: [], bootstrap: [AppComponent] }) |
3. Copy and paste the following element in the root component (if using angular-cli, you can paste it in app.component.html)
1 | <jaspero-confirmations></jaspero-confirmations> |
4. Make 3 pieces of interface as follows
resolve-emit.ts and copy the following script
1 2 3 4 5 6 | export interface ResolveEmit { // Returns this if modal resolved with yes or no resolved?: boolean; // If the modal was closed in some other way this is removed closedWithOutResolving?: string; } |
confirm-emit.ts and copy the following script
1 2 3 4 5 6 7 8 9 | import {ConfirmSettings} from './confirm-settings'; export interface ConfirmEmit { close?: boolean; message?: string; title?: string; resolve$?: any; override?: ConfirmSettings; } |
confirm-settings.ts and copy the following script
1 2 3 4 5 6 7 | export interface ConfirmSettings { overlay?: boolean; // Default: true overlayClickToClose?: boolean; // Default: true showCloseButton?: boolean; // Default: true confirmText?: string; // Default: 'Yes' declineText?: string; // Default: 'No' } |
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
1 2 3 | import { ConfirmationService } from '@jaspero/ng2-confirmations'; import { ResolveEmit } from '../../interface/resolve-emit'; import { ConfirmSettings } from '../../interface/confirm-settings'; |
Create parameter options that will be used in the confirmation box with the following script
1 2 3 4 5 6 7 8 9 10 11 | export class YourComponentName implements OnInit { settings: ConfirmSettings | any = { overlay: true, overlayClickToClose: true, showCloseButton: true, confirmText: 'Yes', declineText: 'No' }; // another code |
Add the following code to the constructor
1 2 3 | constructor( private _confirmation: ConfirmationService ) {} |
How to use the ng2-confirmations box angular 4 as follows
1 2 3 4 5 6 7 8 | this._confirmation.create('Example confirm button', 'Test confirmation button', this.settings) .subscribe((ans: ResolveEmit) => { if (ans.resolved == true) { console.log('accepted button clicked'); } else { console.log('decline button clicked'); } }); |
Its use on angular 4 is like the following motion picture
Another article: Tutorial How To Integrate Angular 4 + Bootstrap 3 For Beginners
Such a simple tutorial may be useful
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018
- Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018
confirm window is not opening
I am using angular 4 only. but confirm window is not displaying
is there an error ?
please show here your error code from console 🙂
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.