Saturday, June 9, 2018

How to use alert in ionic 2 | ionic 3 | ionic 4

Use below code in your TS file :


First We will import AlertController and initialise it in the constructor.

import { AlertController } from ‘ionic-angular’;

export class MyPage {
constructor(public alertCtrl: AlertController) {
}

showAlert() {
  let alert = this.alertCtrl.create({
  title: ‘Alert Title’,
  subTitle: ‘Message to show in alert.’,
  cssClass: ‘alertcss’,
  buttons: [{
    text: ‘OK’,
    cssClass: ‘buttoncss’
   }]
  });
   alert.present();    // to show alert
 }
}



Use below code in your HTML template :

<button block (click)="showAlert()">Alert Example</button>


Dismissing alert by code :

Use this code in TS file : alert.dismiss();


Use cssClass to style alert button :


.buttoncss{
color:#e74c2F;
/*Any other style you wish to apply*/
}

.alertcss{
color:#e7333c;
/*Any other style you wish to apply*/
}

No comments:

Post a Comment