Using the SweetAlert2 module, you can create custom popups: success messages, error messages, warning modals, confirm modals, custom notifications, and prompt windows.

Also, your SweetAlert2 modules can be easily customized.

SweetAlert Module

You can learn how to add an external npm module to the app from this guide.

For more information on how to customize modal's content, visit the SweetAlert docs page.

Getting the Ionic Sweet Alert App

Getting the Ionic app is really fast and easy as the app is available as a Sweet Alert plugin inside the App Builder.

1. From the Apps tab, click Create new app.
2. Select Ionic Blank for the application type, enter the app name, and click the Create button.
3. When the visual App Builder loads, click CREATE NEW > From Plugin.
4. Under Utilities, select SweetAlert.
5. Click Import selected plugins:

The app is almost ready for testing and there is one thing you need to do before you can test: set the SweetAlertScreen as the default route in Routing and save the changes:

🚧

Important!

If you skip the above step, the starting page of the app will be the default Screen1 page and not SweetAlertScreen so, you will not be able to test the alerts!

To launch the app in the browser, click the TEST button in the App Builder Toolbar:

But if you are interested in how the plugin was created, please check out the steps below.

Creating New App

1. From the Apps tab, click Create new app.
2. Select Ionic Blank for the application type, enter, enter an app name, and click Create.

Adding Dependencies

1. On the left side, unfold the Project Tab folder and go to App Settings > Npm modules.
2. Add sweetalert2 as an app Dependency and set 11.7.3 for its version:

3. Then, choose SweetAlertScreen page from the Pages folder and open its CODE panel.
4. In the Custom includes block, add an include with Name = Swal and sweetalert2 for its path:

Creating App UI

1. Now, navigate to the page DESIGN panel. Click on the Toolbar title in the app screen and change it to Sweet Alert by changing the Common > Text property on the right menu of the PROPERTIES panel:

2. Drag the Button component and drop it to the screen, then change its Text property to Alert.
   The resulting app UI is very simple:

Application Logic

1. Expand the EVENTS tab from the bottom.
2. There, for the *Button1 component, select the Click event, and for action, set Run TypeScript with inserting the following code:

Swal.fire({
  title: "Good job!",
  text: "You've found out how to use Sweet Alerts module!",
  icon: 'info',
  confirmButtonText: 'Cool',
  heightAuto:false
});

🚧

Important: heightAuto:false!

You are free to use any code you like (can look for samples at https://sweetalert2.github.io/) but make sure you add the line heightAuto:false to your code.

App Testing

Now, you are ready to test your app. Сlick the TEST button in the App Builder Toolbar to launch your app in the browser.
After the app starts in the web browser, click the Alert button to see the alert:

Testing App

When your app version is ready, you might also like to test it on the device.

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.