Ionic Alert
An alert is a dialog that notifies the user with important information to make a decision or provide the ability to choose a specific action or list of actions. It appears on top of the app content. It can be dismissed manually by the user before resuming interaction with the app. It can also include a header, sub-header, and message options.
An alert can be thought of as a floating modal which should be used for a quick response such as password verification, small app notifications, and many more. The alerts are very flexible and can be customized very easily.
Alert Controller
The alert controller is responsible for creating an alert in the Ionic application. It uses create() method to create an alert and can be customized by passing alert option in the create() method.
The alerts can be categorized into multiple types, which are given below.
1. Basic Alerts
These types of alerts are used to notify the users about new information. The information is of different types, such as a change in the app, about new features, an urgent situation that requires acknowledgment, or as a confirmation notification to the user that an action was successful or not. The following example explains the use of basic alerts.
Example
In this typescript file, we need first to import the Alert Controller. Then, create a showAlert() function, which contains the alert options such as header, sub-header, message, and button. After that, we create an onDidDismiss() method to resume an interaction with the app.
Home.page.ts
Home.page.html
In this file, we are going to create a button. When we press the button, it will call the showAlert() function. The implementation of the showAlert() function is defined in the home.page.ts file.
Output:
When you run the application, it will give the following screen. When you click on the button, immediately, you will get the alert message. Now, click on the OK button, the alert message will be disappeared.
2. Multiple Buttons Alerts
This type of alert is used to give the multiple alerts buttons. It is similar to the basic alert type, except it contains the multiple buttons instead of a single button. Here, the rightmost button work as a primary button.
Example
Home.page.ts
Home.page.html
Output:
When you run the application, you will get the following output.
3. Prompt Alerts
The prompt alert is used to input data or information. Sometimes, we can use it to ask the password from the user before moving forward in an application. The following example explains it more clearly.
Example
Home.page.ts
Home.page.html
Output:
4. Confirmation Alerts
These types of alerts are used to confirm a particular choice before moving forward in the application. For example, it is required when a user wants to delete or remove a contact from the address book.
Example
Home.page.ts
Home.page.html
Output:
5. Radio Alerts
Radio alerts are similar to confirmation alerts, but it is recommended to use a radio component instead of this. This type of alert provides a set of options to the user, where only one option can be chosen.
Example
Home.page.ts
Home.page.html
Output:
6. Checkbox Alerts
Checkbox alerts are similar to confirmation alerts, but it is recommended to use the checkbox component instead of this. This type of alert provides a set of multiple choices to the user, where the user can select the option of their choices.
Example
Home.page.ts
Home.page.html
Output:
