@tanmay_patil wrote:
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; }
Posts: 1
Participants: 1
