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 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 the user’s action to continue.
If you are looking for notifications, here is the tutorial for the same.
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 let’s include the required files in our 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>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
}
}]);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!");
}
});Our final app.js looks something like the below.
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!");
}
});
}
}]);<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.
