Ion Toggle With Confirm Alert

Ionic Framework Ionic Angular
1

Hello,

I have a toggle in a page. I want to add a confirm alert to the toggle such that when a user tap the toggle, an alert will appear and ask if the user really want the toggle to change state. If the user click ‘Confirm’, the toggle then goes to checked mode. If the user click ‘Cancel’ instead, the toggle will stay as its current state before being clicked. Is it possible?

2

well,
there are several ways for doing it:
one could be the folloing:

your html component: 
<ion-toggle #toggle checked="false" (click)=" presentAlert()"></ion-toggle>

your .ts file

import { Component, ViewChild } from '@angular/core';
import { IonToggle } from '@ionic/angular';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.page.html',
  styleUrls: ['./test-page.page.scss'],
})

export class TestPagePage  {
  @ViewChild('toggle', { static: true }) toggleItem: IonToggle;
  lastStatus: boolean = false;
  constructor(
    private alertController: AlertController
  ) { }


  async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Warning',
      message: 'Do you want to change the value?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          id: 'cancel-button',
          handler: (blah) => {
            this.toggleItem.checked = this.lastStatus;
            this.lastStatus = this.toggleItem.checked;
          }
        }, {
          text: 'Okay',
          id: 'confirm-button',
          handler: () => {
            this.toggleItem.checked = !this.lastStatus;
            this.lastStatus = this.toggleItem.checked;
          }
        }
      ]
    });

    await alert.present();
  }


}