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

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

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:
Adding DependencyAdding Dependency

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:
Custom IncludesCustom Includes

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 Text property on the right menu of the PROPERTIES panel:
App ViewApp View

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:

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

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:

AlertAlert

Alert


Did this page help you?