Javatpoint Logo
Javatpoint Logo

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.

Ionic Alert
Ionic Alert

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.

Ionic Alert

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:

Ionic Alert

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:

Ionic Alert

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:

Ionic Alert

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:

Ionic Alert
Next TopicIonic Buttons




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA