Ngx, Confirm box for Angular 🚀
Tags: angular, tutorial, opensource, typescript
Published: 2021-10-27 16:06:03

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](https://costlydeveloper.github.io/ngx-awesome-popup/#/playground/confirm-box-generator) 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

```typescript

imports: [

    NgxAwesomePopupModule.forRoot(), 

    ConfirmBoxConfigModule.forRoot()

]

```



#####3. Setup confirm box function / method

```typescript

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](https://costlydeveloper.github.io/ngx-awesome-popup/#/playground/confirm-box-generator) and specify your needs.

*** 



# How does it look like?



![Confirm box](https://costlydeveloper.github.io/ngx-awesome-popup/assets/confirm-box.png)


![Confirm box](https://costlydeveloper.github.io/ngx-awesome-popup/assets/confirm-box-red.png)

![Confirm box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db2zyuu3kvn61uadfxva.png)

![Confirm box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x70nimvoimxtv7ui7kpq.png)


# Where to see more?



[Confirm box - playground](https://costlydeveloper.github.io/ngx-awesome-popup/#/playground/confirm-box-generator)

[Confirm box - StackBlitz](https://stackblitz.com/edit/minimal-confirm-box?file=src/app/app.component.ts)

[npm library](https://www.npmjs.com/package/@costlydeveloper/ngx-awesome-popup)

[The community, Q&A](https://github.com/costlydeveloper/ngx-awesome-popup/discussions)