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

2. Import in App.module.ts

imports: [

    NgxAwesomePopupModule.forRoot(), 

    ConfirmBoxConfigModule.forRoot()

]

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);

        });

    }

4. Or use code generator

Confirm box code generator and specify your needs.

How does it look like?

Where to see more?

Confirm box - playground

Confirm box - StackBlitz

npm library

The community, Q&A