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.

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
    });
});