Action Confirmation via Alert

Learn how to add a delete confirmation feature in your application.

We'll cover the following

The way the code is currently written, deleting a student from the roster might be done accidentally if the user clicks or taps on the wrong button in the action sheet. There is no warning or confirmation requested. Likewise, when a student is deleted, there is no indication that the action occurred (other than the name disappearing from the list). We will address both of these shortcomings in this lesson.

Delete confirmation

It is inconsiderate for an app to take a destructive action without at least warning the user. It is better to ask for confirmation, and that is what you will do here. In the previous lesson, both of the Delete buttons simply call the deleteStudent function. Instead, it would be better to get a confirmation first. You can get that confirmation using an ion-alert.

The ion-alert component

An ion-alert is a modal UI component that provides a simple warning to the user that something important is about to happen, and optionally provide a way to cancel it.

Below is how I suggest implementing the confirmation. As with all Ionic components, it renders with the appropriate look and feel on both Android and iPhone.

Get hands-on with 1200+ tech skills courses.