How to show a confirmation message before delete Items in Ionic 3 Angular 4?

How to show a confirmation message before delete Items in Ionic 3 Angular 4?

This post helps us to understand about the display custom “Confirmation Alerts Message” using the Ionic 3 Angular 4. Please follow the below steps, It might help us to understands.

Steps 1- Used Actions Buttons to displayed alert and confirmation box

    <ion-fab right bottom>
      <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
      <ion-fab-list side="left">
        <button ion-fab><ion-icon name="trash" (click)="presentConfirm()"></ion-icon></button>
        <button ion-fab><ion-icon name="md-information-circle" (click) ="infoAlert()"></ion-icon></button>       
      </ion-fab-list>
    </ion-fab>

Step 2 - Using css class in home components!

home.ts -
import { Component } from '@angular/core';
import { NavController, App, AlertController } from 'ionic-angular';
import { WelcomePage} from '../../pages/welcome/welcome';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public app: App, private alertCtrl: AlertController) {  }

  //Used for notification alert messages
  infoAlert (){
    let alert = this.alertCtrl.create({
      title: 'Site Info!',
      subTitle: 'My name is Anil Singh. I born and brought up in Kushinagar (U.P.) India. I have done B.Sc(Math) and Master of Computer Application (MCA). I’m currently working as Technical Lead at Australian MNC and have earned total experience of 8+ years in different domain like Telecom, Legal and Casino Gaming industry. I have written over 1500+ technical articles on my blog http://code-sample.com. I also have a number of certifications including MCP, MCTS - 515 and MCTS - 513. My hobbies include - learning new technologies, blogging, writing and sharing knowledge using social media and so on.',
      buttons: ['Dismiss']
    });
    alert.present();
  }

 //Used for Confirmation message
  presentConfirm() {
    let alert = this.alertCtrl.create({
      title: 'Confirm Items',
      message: 'Do you want to remove this?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass:'icon-color',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Ok',
          cssClass:'icon-color',
          handler: data => {
            console.log('Items Removed!');
            //Call you API to remove Items here.
          }
        }
      ]
    });
    alert.present();
  }
}

Result looks like
 
Stayed Informed Angular 4 Documents and Ionic 3 CLI Angular 4

I hope you are enjoying with this post! Please share with you friends. Thank you so much!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^