Ionic 5 SweetAlert Plug-in App

The tutorial demonstrates how to use the SweetAlert2 external module to display modal windows in your Ionic 5 app.

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 5 Sweet Alert App

Getting the Ionic 5 app is really fast and easy as the app is available as a Sweet Alert plug-in inside the App Builder.

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

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:

19051905

🚧

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 :

459459

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

Creating New App

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

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 9.17.1 for its version:
13021302

Adding Dependency

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

Custom Includes

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:
13601360

App View

  1. Drag & drop the Button component to the screen, and change its Text property to Alert.
    The resulting app UI is very simple:
694694

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'
})
13531353

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:

459459

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.

415415

Did this page help you?