Fancy Alert and Confirm Box in AngularJS

May 23, 2016
by Rahil Shaikh

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.

If you are looking for notifications, here is the tutorial for the same.

DEMODOWNLOAD

Implementaion

We will be implementing this by using a cool AngularJS library known as angular-sweetalert.

Create a directory for the project. Navigate into the directory.

Next create two files index.html and app.js.

Now lets include the required files into our index.html.

index.html
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="node_modules/sweetalert/lib/sweet-alert.css">
    </head>
    <body>
        <!-- Our app here -->
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="node_modules/angular-sweetalert/SweetAlert.min.js"></script>
        <script src="node_modules/sweetalert/lib/sweet-alert.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

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.

app.js
angular.module('alertDemo', ['oitozero.ngSweetAlert'])
.controller('demoCtrl',['SweetAlert', function(SweetAlert){
    var vm = this;
    vm.alert = function(){
        //alert implementation here
    }
    vm.confirm = function(){
       //confirm implementation here
    }
}]);

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.

Simple Alert
vm.alert = function(){
        SweetAlert.swal("I'm a fancy Alert"); //simple alert
    }

We just need to call the swal function on our SweetAlert service with the alert message to display, as simple as that.
A confirm has a little more configurations. Have a look below.

Simple Alert
vm.confirm = function(){
        SweetAlert.swal({
            title: "Are you sure?", //Bold text
            text: "Your will not be able to recover this imaginary file!", //light text
            type: "warning", //type -- adds appropiriate icon
            showCancelButton: true, // displays cancel btton
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false, //do not close popup after click on confirm, usefull when you want to display a subsequent popup
            closeOnCancel: false
        },
        function(isConfirm){ //Function that triggers on user action.
            if(isConfirm){
                SweetAlert.swal("Deleted!");
            } else {
                SweetAlert.swal("Your file is safe!");
            }
        });

Our final app.js looks something like below.

Simple Alert
angular.module('alertDemo', ['oitozero.ngSweetAlert'])
.controller('demoCtrl',['SweetAlert', function(SweetAlert){
    var vm = this;
    vm.alert = function(){
        SweetAlert.swal("I'm a fancy Alert"); //simple alert
    }
    vm.confirm = function(){
        SweetAlert.swal({
            title: "Are you sure?", //Bold text
            text: "Your will not be able to recover this imaginary file!", //light text
            type: "warning", //type -- adds appropiriate icon
            showCancelButton: true, // displays cancel btton
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: false, //do not close popup after click on confirm, usefull when you want to display a subsequent popup
            closeOnCancel: false
        },
        function(isConfirm){ //Function that triggers on user action.
            if(isConfirm){
                SweetAlert.swal("Deleted!");
            } else {
                SweetAlert.swal("Your file is safe!");
            }
        });
    }
}]);

We now need to create a couple of buttons and call the respective functions on click.

index.html
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="node_modules/sweetalert/lib/sweet-alert.css">
    </head>
    <body>
        <div ng-controller="demoCtrl as demo">
            <p>
                <h2>Simple Alert</h2>
                <button ng-click="demo.alert()">click</button>
           
           
                <h2>Simple Confirm</h2>
                <button ng-click="demo.confirm()">click</button>
           
        </div>
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="node_modules/angular-sweetalert/SweetAlert.min.js"></script>
        <script src="node_modules/sweetalert/lib/sweet-alert.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

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.

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

2 comments

  1. Giri
    |

    HI, Real good work, but while I’m trying to use it in my controller getting some json upexcepted 0 error. Pls. provide the solution for this

    • |

      Hi Giri, you need to describe your problem a bit more. Or email me the code with details.

Leave a Comment