swa

swangular

Swangular: An AngularJS wrapper for Sweet Alert 2

Showing:

Popularity

Downloads/wk

14

GitHub Stars

23

Maintenance

Last Commit

4yrs ago

Contributors

6

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

github tag Latest Stable Version Latest Stable Version Build Status

swangular

An AngularJS wrapper for SweetAlert2 with some added functionality like binding to scope/controller, using html templates...

Getting Started

The easiest way to install is via bower:

bower install swangular

or via npm:

npm install swangular

Then you just need to include swangular.js and add the dependency in your module

var app = angular.module('yourAwesomeApp', ['swangular']);

app.controller('MainCtrl', function ($scope, swangular) {
    $scope.clickToOpen = function () {
        swangular.swal('Swangular Demo', 'Great demo, right?', 'question')
    };
});

API

The swangular service exposes a number of methods for you to use. Below you can find a list of all the exposed methods:

.swal(options)

This method maps directly to SweetAlert2, and thus has all the same options. Nothing new here.

swangular.swal({   
  title: 'Are you sure you want to pet this capybara?',
  text: "It looks kinda shady",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Hell, yeah!' });

.success(message, [customOptions])

Will create a success message with a default title 'Success', and default type 'success'. You can overwrite/add to these options with the optional customOptions parameter.

swangular.success("Great job!");

.confirm(message, [customOptions])

Will create a confirm message with a default title 'Alert', default type 'warning' and a cancel button. You can overwrite/add to these options with the optional customOptions parameter.

swangular.confirm("Are you sure you want to take the red pill?");

.alert(message, [customOptions])

Will create an alert message with a default title 'Alert', and default type 'warning'. You can overwrite/add to these options with the optional customOptions parameter.

swangular.alert("Look out, I'm about to close!", {timer: 2000});

.info(message, [customOptions])

Will create an info message with a default title 'Info', and default type 'info'. You can overwrite/add to these options with the optional customOptions parameter.

swangular.info("My info message", {title: "My custom information title!"});

.open(options)

Will open a SweetAlert2 alert with some Angular sugar on top. You can still use all SweetAlert2 options, but there are a number of Angular specific options added. This allows for binding to scope/controller, using html-templates and more.

swangular.open({
        title: "New user",
        htmlTemplate: "/components/new-user/new_user.html",
        showCancelButton: true,
        preConfirm: "submit",
        showLoaderOnConfirm: true,
        controller: 'NewUserCtrl',
        controllerAs: 'vm',
        resolve: {
            injectedValue: function() {
                return "What a time to be alive!";
            }
        }
});
    
app.controller('NewUserCtrl', function (injectedValue) {
        console.log(injectedValue) // What a time to be alive!
});

Options:

All the options below are unique to Swangular or have added functionality compared to SweetAlert2. Besides these options, you can still use all standard SweetAlert2 options.

ArgumentTypeDescription
htmlstringThis can be use in the same way as SweetAlert2 html. Additionally, if a scope or controller options are passed, this html will be compiled and the markup will be bound to that particular scope/controller.
htmlTemplatestringHas the same function as html, but here you can pass a path to an external template.
scopeObjectAny passed html will be compiled and bound to this scope. If both scope and controller are passed, this scope will be used as the parent scope for the controller.
controllerstringAny passed html will be compiled and bound to this controller.
controllerAsstringIf you use controllerAs syntax in your markup, you can pass the correct string here.
preConfirmstring or function()When a function, it will behave just like in SweetAlert2. When a string is passed, it will use this string to look for a function on the passed controller. You have to make sure there is a function with the specified name on that controller. Should return a promise.
resolveObject.<String, Function>Dependencies to be injected into the controller. If one or more of the depencies are promises, swangular will wait untill these are resolved/rejected before instantiating the controller.

Methods

The following methods are also accessible:

  • swangular.close()
  • swangular.closeModal()
  • swangular.enableButtons()
  • swangular.disableButtons()
  • swangular.enableConfirmButton()
  • swangular.disableConfirmButton()
  • swangular.showLoading()
  • swangular.enableLoading()
  • swangular.hideLoading()
  • swangular.disableLoading()
  • swangular.clickConfirm()
  • swangular.clickCancel()

Provider

During config phase you can inject the swangularProvider to set default configuration options.

app.config(function (swangularProvider) {
    swangularProvider.setDefaults({
        animation: false,
        reverseButtons: true
    });
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial