Fancy Alert and Confirm Box in AngularJS

Alerts and confirm boxes are an important part of any web application. Alerts are usually used to gain the user’s attention to some important action that is begin taken. Confirms are required to get the assurance of the action taken by the user.

That being said, the standard JavaScript alert and confirm are not that cool for modern web applications. In this tutorial, we will see how we can create fancy alerts with ease for our AngularJS application.

Note. Notifications and alerts are different. A notification may pop up in some corner of your application with the info, without blocking the application. On the other hand, an Alert requires user’s action to continue.

Here if you see we have included angular.js, SweetAlert.min.js, sweet-alert.min.js and finally our app.js in order. We have also added sweet-alert.css at the top.
You can download these files from here or if you are using any package manager you can use it to download. I’m using npm, so I download it by running npm install angular-sweetalert.
Now lets create our demo angular app.

Here we have defined our angular module. Remember we are injecting oitozero.ngSweetAlert as a dependency to our app. We have also injected SweetAlert service into our controller.
We have also defined two functions vm.alert and vm.confirm, where we will be adding our alert and confirm implementations respectively.
Lets first proceed with alert.

You can now run the app on any local server eg: xampp or you can directly open up index.html in your browser.
There are a few more configurations available with angular-sweetalert, you can check them out on the demo page here.

Conclusion

Alerts and Confirms are an important part of any web application and now we can add them in our angular application with some cool animations and effects without having to do too much.