3.1.0 • Public • Published

Ember Sweet Alert

An ember-cli addon for using SweetAlert2 in Ember applications.


  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above


ember install ember-sweetalert

IE11 requires the Babel polyfill to be present, otherwise you'll get a Promise is undefined error. As per this comment you can add it via your ember-cli-build.js file as follows:

// ember-cli-build.js
let app = new EmberApp(defaults, {
  'ember-cli-babel': {
    includePolyfill: true


In your templates

Basic Usage

The sweet-alert component allows setting SweetAlert's attributes.

<SweetAlert @title="Hello World" />

By default the alert will be open as soon as the template is rendered. See below for controlling whether the alert is open.


All Sweet Alert options Sweet Alert configuration options can also be passed in as arguments:

  @title="Hello World"
  @text="Welcome to our website."
  @footer="Nothing else to say."

If there are defaults that you want to set for every alert, you can set these in your environment config, e.g.:

ENV['ember-sweetalert'] = {
  target: '#my-sweetalert',
  allowOutsideClick: false


By default the alert will be open when the component is rendered. To control this behaviour, use the show attribute. For example to open the alert when a button is clicked:

{{! sayHello === false to start }}
  @title="Hello World"
  @text="Welcome to our website."

<button {{action (mut sayHello) true}}>Click Me</button>

The Sweet Alert component follows the Data-Down, Action Up (DDAU) pattern. This means in the example above, the alert will only show once, as sayHello will remain true once the alert is closed. To allow an alert to be open/closed any number of times, use an action to set the show variable back to false once the alert is closed. For example:

{{! sayHello === false to start }}
  @title="Hello World"
  @text="Welcome to our website."
  @willClose={{action (mut this.sayHello) false}}

<button {{action (mut this.sayHello) true}}>Click Me</button>


The component supports all the Sweet Alert actions allowed via configuration:

  • willOpen
  • didOpen
  • didRender
  • willClose
  • didClose
  • didDestroy

In addition, the component also supports the following two actions:

  • onConfirm: invoked if the user clicks the confirm button within the alert.
  • onCancel: invoked if the user closes the alert without confirmation.

Both actions receive the return value from Sweet Alert.

The following example collects an email from a user, giving them a different message based on whether they provided the email or cancelled:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class JoinMailingListComponent extends Component {
  @tracked enterEmail = false;
  @tracked email;
  @tracked sayThankYou = false;
  @tracked didNotJoin = false;

  collectEmail() {
    this.enterEmail = true;

  join({ value }) {
    this.email = value;
    this.enterEmail = false;
    this.sayThankYou = true;

  didCancel() {
    this.enterEmail = false;
    this.didNotJoin = true;

  reset() {
    this.enterEmail = false;
    this.email = null;
    this.sayThankYou = false;
    this.didNotJoin = false;
<button {{on "click" this.collectEmail}}>Join Mailing List</button>

  @title="Submit email to join our mailing list"

  @title="Thank You!"
  @text="You are now on our mailing list."

  @text="Ok, we won't add you to our mailing list."

In your code


The recommended way to use SweetAlert in your code is to inject the swal service and use the fire method. The service ensures your default SweetAlert config is used, plus integrates with the Ember run loop.

Here is an example:

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class DeleteModelComponent extends Component {
  @service swal;

  async confirm() {
    let { value } = await this.swal.fire({
      title: 'Are you sure?',
      showCancelButton: true

    if (value) {

The service also exposes the SweetAlert methods, scheduling any action methods on the Ember run loop.

Import it

If you really need to you can import SweetAlert easily with:

import Swal from 'sweetalert2';

Using SweetAlert directly as an import will not have your default settings and will not be run-loop aware.

In your tests


You will need to set the target for Sweet Alert to the Ember testing div. Add the following to your environment config:

if (environment === 'test') {
  ENV.APP.rootElement = '#ember-testing';
  // ...
  ENV['ember-sweetalert'] = { target: ENV.APP.rootElement };

Test Helpers

This addon provides a number of test helpers that can be used in acceptance or rendering tests.

Test helpers can be imported from ember-sweetalert/test-support. The available helpers are:

Helper Description
open(target) Clicks the specified target and waits for Sweet Alert to open.
confirm Clicks the Sweet Alert confirm button.
confirmAndClose Clicks the Sweet Alert confirm button and waits for it to close.
cancel Clicks the Sweet Alert cancel button.
cancelAndClose Clicks the Sweet Alert cancel button and waits for it to close.
waitForOpen Wait for Sweet Alert to open.
waitForClose Wait for Sweet Alert to close.

An example acceptance test:

import { module, test } from 'qunit';
import { visit, fillIn } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { open, confirmAndClose } from 'ember-sweetalert/test-support';

module('Acceptance | join mailing list', function(hooks) {

  test('user can join mailing list', async function(assert) {
    await visit('/');
    await open('button.join');
    await fillIn('input[type="email"]', 'foo@example.com');
    await confirmAndClose();

    assert.dom('.email').hasText('Your email is: foo@example.com');


See the Contributing guide for details.


This project is licensed under the MIT License.

Package Sidebar


npm i ember-sweetalert

Weekly Downloads






Unpacked Size

27.3 kB

Total Files


Last publish


  • tonkpils
  • lindyhopchris