DEV Community

Cover image for Ngx, Confirm box for Angular 🚀
Boris Jenicek
Boris Jenicek

Posted on

Ngx, Confirm box for Angular 🚀

Today's topic is Confirmation dialog box in Angular. It's been a while since my last post, and this one might be pretty useful for Angular developers. In the following several passages I'll try to answer several questions:

  • What is the confirmation box in Angular?

  • What is the best confirmation dialog for Angular, and why?

  • How to integrate it into any Angular project?

  • How it looks like?


What is the confirmation box in Angular?

It is a simple popup that prevents unwanted actions, for example when the user clicks the delete button, the popup dialog should appear with the question: "Are you sure you want to delete item data?" and two buttons "Confirm" and "Decline". That is an enhanced level of security needed in almost every professional application.


What is the best confirmation dialog for Angular?

It is the ngx-awesome-popup an open-source library made for Angular. It provides highly scalable options and styles to adapt to any angular project. The best part is it's callable only from typescript so it can be used directly in services without HTML templates and it uses observables.


How to integrate it into the project?

1. install it to your angular project:

npm i @costlydeveloper/ngx-awesome-popup

Enter fullscreen mode Exit fullscreen mode
2. Import in App.module.ts

imports: [

    NgxAwesomePopupModule.forRoot(), 

    ConfirmBoxConfigModule.forRoot()

]

Enter fullscreen mode Exit fullscreen mode
3. Setup confirm box function / method

confirmBox() {

        const confirmBox = new ConfirmBoxInitializer();

        confirmBox.setTitle('Are you sure?');

        confirmBox.setMessage('Confirm to delete user: John Doe!');

        confirmBox.setButtonLabels('YES', 'NO');



        // Choose layout color type

        confirmBox.setConfig({

            LayoutType: DialogLayoutDisplay.DANGER // SUCCESS | INFO | NONE | DANGER | WARNING

        });



        // Simply open the popup and listen which button is clicked

        confirmBox.openConfirmBox$().subscribe(resp => {

            // do some action after user click on a button

            console.log('Clicked button response: ', resp);

        });

    }

Enter fullscreen mode Exit fullscreen mode
4. Or use code generator

Confirm box code generator and specify your needs.


How does it look like?

Confirm box

Confirm box

Confirm box

Confirm box

Where to see more?

Confirm box - playground

Confirm box - StackBlitz

npm library

The community, Q&A

Discussion (3)

Collapse
costlydeveloper profile image
Boris Jenicek Author • Edited on
  • NEW - Animations Choose between 11 appearing and 9 disappearing fancy animations, available on all modules Dialog, Confirm box, and Toast Notification.

animations

Appearing animations:

  • Bounce in
  • Swing
  • Zoom in
  • Zoom in rotate
  • Elastic
  • Jello
  • Fade in
  • Slide-in up
  • Slide-in down
  • Slide-in left
  • Slide-in right

Disappearing animations:

  • Bounce out
  • Zoom out
  • Zoom out wind
  • Zoom out rotate
  • Flip out
  • Slide-out up
  • Slide-out down
  • Slide-out left
  • Slide-out right

DEMO

Collapse
mysticza profile image
Chris Boik

How well timed for me. Thank you

Collapse
costlydeveloper profile image
Boris Jenicek Author

Cool, ping me there if you will need any help: github.com/costlydeveloper/ngx-awe...