ionic3 Alert Components

Alerts are a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).

• 
  

Components:

1. Basic Alerts
2. prompt Alerts
3. Confirmation Alerts
4. Radio 
5. Alerts
6. Checkbox Alerts

• Confirmation Alerts:
• import { Component, ViewChild } from '@angular/core';

  import { Nav, Platform,AlertController } from 'ionic-angular';

  import { StatusBar } from '@ionic-native/status-bar';

  import { SplashScreen } from '@ionic-native/splash-screen';

  import { HomePage } from '../pages/home/home';

  import { Signup } from '../pages/signup/signup';

  
  
  

  @Component({

  templateUrl: 'app.html'

  })

  export class MyApp {

  @ViewChild(Nav) nav: Nav;

  
  

  rootPage: any = HomePage;

  alert: any;

  pages: Array<{title: string, component: any}>;

  
  

  constructor(public platform: Platform, public statusBar: StatusBar,

  public splashScreen: SplashScreen, public alertCtrl: AlertController) {

  this.initializeApp();

  
  

  // used for an example of ngFor and navigation

  this.pages = [

  { title: 'Home', component: HomePage },

  { title: 'Signup', component: Signup }

  ];

  
  

  }

  
  

  initializeApp() {

  this.platform.ready().then(() => {

  // Okay, so the platform is ready and our plugins are available.

  // Here you can do any higher level native things you might need.

  this.statusBar.styleDefault();

  this.splashScreen.hide();

  this.platform.registerBackButtonAction(() => {

  if(this.nav.canGoBack()){

  this.nav.pop();

  }else{

  if(this.alert){

  this.alert.dismiss();

  this.alert =null;

  }else{

  this.showAlert();

  }

  }

  });

  });

  }

  showAlert() {

  this.alert = this.alertCtrl.create({

  title: 'Exit?',

  message: 'Do you want to exit the app?',

  buttons: [

  {

  text: 'Cancel',

  role: 'cancel',

  handler: () => {

  this.alert =null;

  }

  },

  {

  text: 'Exit',

  handler: () => {

  this.platform.exitApp();

  }

  }

  ]

  });

  this.alert.present();

  }

  
  

  openPage(page) {

  // Reset the content nav to have just this page

  // we wouldn't want the back button to show in this scenario

  this.nav.setRoot(page.component);

  }

  }
•