Showing posts with label ng-sweet-alert. Show all posts
Showing posts with label ng-sweet-alert. Show all posts
ng-sweet-alert

ng-sweet-alert

May 17, 2017

ng-sweet-alert is an directive for sweet alert [sweetalert]. Integration of sweet alert becomes very easy with angular js. There is no need to write a single line of javascript code. Only few html attribute is enough to use sweetalert.

Getting Started


Install via bower
 bower install ng-sweet-alert  
Install via npm
 npm install ng-sweet-alert  
Add dependency in your module
 angular.module('yourApp',[  'ng-sweet-alert' ]);   

Demo


Have a look at the DEMO or the plunkr! Edit and Fork :)

Configure


 <input sweetalert sweet-options="{title: 'Are you sure?',text: 'You will not be able to recover this imaginary file!',type: 'warning',showCancelButton: true,confirmButtonColor: '#DD6B55',confirmButtonText: 'Yes, delete it!',cancelButtonText: 'No, cancel plx!'}" sweet-confirm-option="{title: 'Deleted!',text: 'Your imaginary file has been deleted.',type: 'success'}" sweet-cancel-option="{title: 'Cancelled!',text: 'Your imaginary file is safe',type: 'error'}" type="submit" name="login-submit" sweet-on-cancel="checkCancel()" sweet-on-confirm="checkConfirm()" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">  

Documentation


Option sweet-options
sweet-options '{title: 'Are you sure?',text: 'You will not be able to recover this imaginary file!',type: 'warning',showCancelButton: true,confirmButtonColor: '#DD6B55',confirmButtonText: 'Yes, delete it!',cancelButtonText: 'No, cancel plx!'}'
sweet-confirm-option "{title: 'Deleted!',text: 'Your imaginary file has been deleted.',type: 'success'}"
sweet-cancel-option {title: 'Cancelled!',text: 'Your imaginary file is safe',type: 'error'}
sweet-on-cancel checkCancel()
sweet-on-confirm checkConfirm()


Use SweetAlert as service


swal() gets two arguments; first argument is parameters Objects (with default values). second argument is Callback function when clicking on "OK"/"Cancel", which is a promise. register to the promise (using 'then') and handle the resolve / reject according to your business logic.
Add 'SweetAlert' to your directive / controller / ect) Use SweetAlert.confirm(msg, options) / SweetAlert.alert(msg, options) / SweetAlert.info(msg, options) / SweetAlert.success(msg, options) pass arguments:
msg; String - The message to be displayed in the alert / confirm box (mandatory). options; Object (optinal): title: String - the title of the box. type: String - "warning" / "info" / "error" / "success" / "" (empty string will not display a graphic icon). showCancelButton: Boolean - shows the "cancel" button (true will behave like confirm dialog, false will behave like alert dialog). Use returned promise;
 SweetAlert.confirm("Are you sure?", {title : "Careful now!"})  
      .then(function(p) { do something on success },  
         function(p) { do something on fail }  
      );  
 SweetAlert.success("You have successfully completed our poll!", {title: "Good job!"});  


License


MIT License

Note: Special thanks to Tushar Borole
Contact - tusharborole@ymail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.