• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Tutorial Confirmation Dialog Box Using Angular 4 And Ng2-confirmations

Tutorial Confirmation Dialog Box Using Angular 4 And Ng2-confirmations

By Sigit Prasetya Nugroho ∙ December 15, 2017 ∙ Javascript ∙ 7 Comments

Share : TwitterFacebookTelegramWhatsapp

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.

Table of Contents

    • 0.1 What is confirmation dialog box?
  • 1 Apply a confirm() Method to Angular 4
    • 1.1 The tutorial uses ng2-confirmations on angular 4

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.

Related Articles :

  • Trick To Redirect New Window Or Tab With Post Method On Angular 5
  • Tutorial To Change Date Format Ng-bootstrap Datepicker Angular 5
  • Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

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

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

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

Another Javascript Related Post :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for poornimapoornima says

    July 5, 2018 at 7:29 am

    confirm window is not opening
    I am using angular 4 only. but confirm window is not displaying

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      July 10, 2018 at 1:20 am

      is there an error ?

      please show here your error code from console 🙂

      Reply
    • Avatar for jquerytrainingjquerytraining says

      December 3, 2018 at 5:14 am

      Not working properly . i have found an alternative jquerytraining.com/custom-confirmation-box-angular-6

      Reply
  2. Avatar for Ahmad Al-AttarAhmad Al-Attar says

    July 20, 2018 at 3:27 pm

    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.

    Reply
  3. Avatar for samsam says

    April 1, 2019 at 11:27 am

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      April 2, 2019 at 7:28 am

      what angular version ?

      Reply
  4. Avatar for TarunTarun says

    April 3, 2019 at 6:16 am

    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.

    Thanks

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

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

Primary Sidebar

Welcome to my Home,

Avatar for TarunThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com