Using event.preventDefault to prevent ion-toggle to toggle


#1

I am using ion-toggle in my app . when user clicks(checks) on the ion-toggle , i have written ionChange hook on the ion-toogle . In this hook ,due to application logic , i am giving prompt to the user saying ion-toggle can not be set .

using event.preventDefault to prevent ion-toggle to toggle

component html

<ion-content padding>
     <ion-slides pager="true">
    <ion-slide *ngFor="let giftSlide of giftsAllMatrix" >
    <ion-row *ngFor="let giftRecord of giftSlide">
      <ion-col *ngFor="let giftCol of giftRecord" col-6>
        <img src="./assets/{{giftCol.giftImage}}" >
          <p> gift code :  {{ giftCol.giftCode }} </p>
          <ion-item>
         <ion-toggle   #giftSelect (ionChange)="onGiftSelect(giftCol.giftCode, giftCol.pointsRequired ,giftCol.giftImage,giftSelect.checked,giftSelect,$event)" checked="false"></ion-toggle>
          </ion-item> 
        </ion-col>
    </ion-row>
    </ion-slide>
    </ion-slides>

component hook - onGiftSelect

onGiftSelect( giftSelCode : string , 
           pointsRequired : number ,
           giftImage : string , 
            selected : boolean 
           ,giftSelect : any,
           event : Event)
      {
         console.log("inside onGiftSelect "+giftSelCode);
         console.log("inside onGiftSelect  points required "+pointsRequired);
         console.log(" selected "+selected );
         console.log(" this.giftSelectedFlg "+this.giftSelectedFlg );
         let navigate = true;
         // if ion-toggle is true then only navigate 
         // when toggle is from 'selected' to 'deselected' do not 
         if ( selected === true)
         {
            if ( this.giftSelectedFlg  === false )
            {
                this.giftSelectedFlg = true;
            } 
            else
            {
    
                if(isProdSetup() === true)
                {
                    this.toast.show( "Select one gift at time ", '3000', 'center').subscribe
                    ( toast => 
                    {
                        console.log(toast);
                    });
                }
                else
                {
                     let alert = this.alertCtrl.create({
                     title: 'Gift selection',
                     subTitle: 'Multiple gift selection disallowed',
                     buttons: ['Dismiss']
                     });
                     alert.present();
                }
              navigate = false;
              event.preventDefault();
        }
         if ( navigate)
        {
           // Pass the control to giftSelect page 
           this.navCtrl.push("Giftselect",
              {
                 giftCode : giftSelCode ,
                 pointsRequired : pointsRequired ,
                 giftImage : giftImage
              });
         }

    }

using viewchild

using nativeElement

this code also does not work . Can anybody help me to get right way to prevent ion-toggle component prevent toggling in ionChange event.

 export class Giftfactory {
      giftsAllMatrix : GiftCatalogueEntry[][][];
      gifts : Array<any> ;
      totalPoints : number = 0;
      error : string;
      giftSelectedFlg : boolean = false;
      giftChoice : any;
      //giftSelect :  any; //template variable.
     @ViewChild ('giftSelect') gtSel ;

onGiftSelect( giftSelCode : string , 
           pointsRequired : number ,
           giftImage : string , 
            selected : boolean 
           ,giftSelect : any,
           event : Event)
    {
    ...
        // trying to uncheck ion-toggle - does not work
        this.gtSel.nativeElement.checked = false;
    }

#2

I would find this a really confusing UI. Toggles are supposed to toggle something, not trigger navigation events.