An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content and must be manually dismissed by the user before they can resume interaction with the app.

In this post, we shall look into all 5 types of Alerts available, and how to implement them.

1. Basic Alerts
2. Prompt Alerts
3. Confirmation Alerts
4. Radio Alerts
5. Checkbox Alerts

See demo: https://www.youtube.com/watch?v=QgE-TbbVSWg

To start with, create a project run this command:

ionic start alertexamples blank

then move into the newly created directory:

cd alertexamples

Open up home.html in Pages -> home directory and add the below code between the ion-content tags.

<ion-header>
<ion-navbar>
<ion-title>Alert</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button block (click)="doAlert()">Basic Alert</button>
<button ion-button block (click)="doAlert()">Basic Alert</button>
<button ion-button block (click)="doAlert()">Basic Alert</button>
<button ion-button block (click)="doAlert()">Basic Alert</button>
<button ion-button block (click)="doAlert()">Basic Alert</button>
</ion-content>

Open home.ts and create funcation: 

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public alertCtrl: AlertController) {}
  doAlert() {   
  }
  doConfirm() {
  }
  doPrompt() {
  }
 doRadio() {
  }
 doCheckbox() {
  }
}

Basic alert function code :

doAlert() {
    let alert = this.alertCtrl.create({
        title: 'Basic Alert',
        subTitle: 'Code Solution',
        buttons: ['Ok']
      });
    alert.present();
  }

Output: 

?

Confirm alert function code :

doConfirm() {
    let alert = this.alertCtrl.create({
      title: 'Confirm alert',
      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
      buttons: [
        {
          text: 'Disagree',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Agree',
          handler: () => {
            console.log('Agree clicked');
          }
        }
      ]
    });
    alert.present();
  }

Output: 

?

Prompt alert function code :

doPrompt() {
    let alert = this.alertCtrl.create({
      title: 'Prompt alert',
      message: 'Enter a name for this new album you\'re so keen on adding',
      inputs: [
        {
          name: 'title',
          placeholder: 'Title'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: (data: any) => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: (data: any) => {
            console.log('Saved clicked');
          }
        }
      ]
    });
    alert.present();
  }

Output: 

?

Radio alert function code :

doRadio() {
    let alert = this.alertCtrl.create({
      title: 'Radio alert',
      inputs: [
        {
          type: 'radio',
          label: 'Blue',
          value: 'blue',
          checked: true
        },
        {
          type: 'radio',
          label: 'Green',
          value: 'green'
        },
        {
          type: 'radio',
          label: 'Red',
          value: 'red'
        },
        {
          type: 'radio',
          label: 'Yellow',
          value: 'yellow'
        },
        {
          type: 'radio',
          label: 'Purple',
          value: 'purple'
        },
        {
          type: 'radio',
          label: 'White',
          value: 'white'
        },
        {
          type: 'radio',
          label: 'Black',
          value: 'black'
        }
      ],
      buttons : [
        {
          text: 'Cancel'
        },
        {
          text: 'Ok',
          handler: (data: any) => {
            console.log('Radio data:', data);
          }
        }
      ]
    });
    alert.present();
  }

Output: 

Checkbox alert function code :

doCheckbox() {
    let alert = this.alertCtrl.create({
      title : 'Checkbox alert',
      inputs: [
        {
          type: 'checkbox',
          label: 'Alderaan',
          value: 'value1',
          checked: true
        },
        {
          type: 'checkbox',
          label: 'Bespin',
          value: 'value2'
        },
        {
          type: 'checkbox',
          label: 'Coruscant',
          value: 'value3'
        },
        {
          type: 'checkbox',
          label: 'Endor',
          value: 'value4'
        },
        {
          type: 'checkbox',
          label: 'Hoth',
          value: 'value5'
        },
        {
          type: 'checkbox',
          label: 'Jakku',
          value: 'value6'
        },
        {
          type: 'checkbox',
          label: 'Naboo',
          value: 'value7'
        },
        {
          type: 'checkbox',
          label: 'Takodana',
          value: 'value8'
        },
        {
          type: 'checkbox',
          label: 'Tatooine',
          value: 'value9'
        }
      ],
      buttons : [
        {
          text : 'Cancel'
        },
        {
          text : 'Okay',
          handler: (data: any) => {
              console.log('Checkbox data:', data);
          }
        }
      ]
    });
    alert.present();
  }

Output: 

Github Link : https://github.com/Sudarshan101/alertexamples