python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions