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;
}