Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

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 modals 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.

Creating a New App

  1. From the Apps tab, click Create new app.

  2. Select Ionic 4 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:

Adding Dependency

Adding Dependency

  1. Then, choose Screen1 from the Pages folder and open Screen1 CODE tab.

  2. In the Custom includes block, add an include with Name Swal and Path sweetalert2:

Custom Includes

Custom Includes

Creating the UI

  1. Open Screen1 and go to its DESIGN tab. 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:

App View

App View

Application logic

  1. Expand the EVENTS panel from the bottom.

  2. There, for the Button 1 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'
})

Testing the App

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:

Alert

Alert

Ionic 4 SweetAlert2 Tutorial


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.