swangular

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.

Argument	Type	Description
html	string	This 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.
htmlTemplate	string	Has the same function as html, but here you can pass a path to an external template.
scope	Object	Any 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.
controller	string	Any passed html will be compiled and bound to this controller.
controllerAs	string	If you use controllerAs syntax in your markup, you can pass the correct string here.
preConfirm	string 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.
resolve	Object.<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
    });
});