GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps

Ionic 4 SweetAlert2 Tutorial

The tutorial demonstrates how to use the SweetAlert2 external module to display modal windows in your Ionic 4 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.

📘

Want to know more?

You can also check this Appery.io Community video that shows how to create Sweet Alerts by integrating them into your Ionic 4 mobile application by using the Login with Apple plug-in from Appery.io:

Creating New App

  1. From the Apps tab, click Create new app.
  2. Select Ionic 4 Blank application type, enter an app name, and click Create. You’ll see a Start page.

Installing Dependencies

  1. On the left side, unfold the Project folder and go to App Settings > Npm modules.
  2. Add sweetalert2 as an app Dependency:
1914

Adding Dependency

  1. Then, choose Screen1 from the Pages folder and open the Screen1 CODE panel.
  2. In the Custom includes block, add an include with Name Swal and Path sweetalert2:
1864

Custom Includes

Creating App UI

  1. Open Screen1 and go to its DESIGN panel. Click on the Toolbar title in the app screen and change it to Sweet Alerts App by changing the Text property on the right menu.
  2. Drag & drop the Button component to the screen, and change its Text property to Show alert and the Expand property to Block on the right menu.
    The resulting app UI is simple:
523

App View

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

App Testing

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

519

Alert