I’m using ionic 3. Using the Ngclass to switch the css class of images on click in a modal. Works well on Android, and Browser. But on IOS the class changes but doesn’t reflect immediately;
The changes only get reflected after i put the app in background and reopen it.
This is what i’m trying to achieve. This is a screenshot from the browser. Works well on Android devices too. On click of the image icons, change the border to red
Hello there,
Read your description - Can you please share the code with me? So I can analyze it and share a solution with you.
Please let me know your thoughts and will proceed further accordingly.
Thanks,
Tej
The clickevent “genderFilter”, applies the [ngclass] to the image icon. Its working well in the browser and Android device, but not IOS. [ngclass] does not reflect immediately on the click event action. This is my condition in the type script file
I understand it - As you are also a developer, I am hoping that you can understand my concerns too.
Kindly share the code & test environment with me - so I can dig into it and get back to you with a solution along with estimation for the same.
Thanks again,
Tej
Hereis the HTML code
<ion-content no-padding no-margin style=“background: transparent”>
<ion-grid mode=“md”>
<ion-row tappable (click)=“closeModal()”>
<ion-col>
</ion-col>
</ion-row>
<div style=“background: white; position: absolute; width: 98%; bottom: 0”>
<ion-row style=“background: black; color: white; height: 30px; border-radius: 4px” tappable (click)=“closeModal()”>
<ion-col item-end>
<img src=“assets/imgs/filter.png” width=“15px” height=“15px” style=“float: right” />
</ion-col>
<ion-col item-left>FILTER</ion-col>
<ion-col col-1>
<ion-icon style=“color: white;font-size:1.8rem; font-weight: bold” item-end name=“close” tappable ></ion-icon>
</ion-col>
</ion-row>
<ion-row no-padding no-margin>
<ion-col style=“margin: 10px auto” text-center no-padding>
<h6 style=“font-size: 1.1rem; color: #878787” no-padding no-margin>GENDER</h6>
</ion-col>
</ion-row>
<ion-row style=“border-bottom: 1px solid black” no-padding no-margin>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“genderFilter(‘male’)”>
<img no-padding no-margin src=“assets/imgs/male.png” class=“btncircle2” [ngClass]="{‘btncircle’: malestatus }" width=“25px” height=“25px” alt="" />
<h6 no-padding no-margin style=“font-size: .85rem;”>MALE</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“genderFilter(‘female’)”>
<img no-padding no-margin src=“assets/imgs/female.png” class=“btncircle2” [ngClass]="{‘btncircle’: femalestatus }" class=“btncircle2” width=“25px” height=“25px” alt="" />
<h6 no-padding no-margin style=“font-size: .85rem”>FEMALE</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“genderFilter(‘unisex’)”>
<img no-padding no-margin src=“assets/imgs/gender.png” class=“btncircle2” [ngClass]="{‘btncircle’: unisexstatus }" class=“btncircle2” width=“35px” height=“35px” alt="" />
<h6 no-padding no-margin style=“font-size: .85rem”>UNISEX</h6>
</ion-col>
</ion-row>
<ion-row>
<ion-col style=“margin: 10px auto” text-center no-padding>
<h6 style=“font-size: 1.1rem; color: #878787” no-padding no-margin>SERVICE</h6>
</ion-col>
</ion-row>
<ion-row style=“border-bottom: 1px solid black” no-padding no-margin>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“serviceFilter(‘sew’)”>
<img no-padding no-margin src=“assets/imgs/sew.jpg” class=“btncircle2” [ngClass]="{‘btncircle’: sewstatus }" width=“25px” height=“25px” alt=""/>
<h6 no-padding no-margin style=“font-size: .85rem”>SEW</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“serviceFilter(‘amend’)”>
<img no-padding no-margin src=“assets/imgs/scissors.png” class=“btncircle2” [ngClass]="{‘btncircle’: amendstatus }" width=“25px” height=“25px” alt="" />
<h6 no-padding no-margin style=“font-size: .85rem”>AMEND</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“serviceFilter(‘ready’)”>
<img no-padding no-margin src=“assets/imgs/hanger.png” class=“btncircle2” [ngClass]="{‘btncircle’: readystatus }" width=“25px” height=“25px” alt="" />
<h6 no-padding no-margin style=“font-size: .85rem”>READY TO WEAR</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“serviceFilter(‘allservice’)”>
<img no-padding no-margin src=“assets/imgs/all.png” class=“btncircle2” [ngClass]="{‘btncircle’: allservice }" width=“25px” height=“25px” alt="" />
<h6 no-padding no-margin style=“font-size: .85rem”>ALL</h6>
</ion-col>
</ion-row>
<ion-row>
<ion-col style=“margin: 10px auto” text-center no-padding no-margin >
<h6 style=“font-size: 1.1rem; color: #878787” no-padding no-margin>TYPE OF GARMENT</h6>
</ion-col>
</ion-row>
<ion-row style=“border-bottom: 1px solid black” no-padding no-margin>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“garmentFilter(‘native’)”>
<img no-padding no-margin src=“assets/imgs/native.png” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: nativestatus }" />
<h6 no-padding no-margin style=“font-size: .85rem”>NATIVE</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“garmentFilter(‘formal’)”>
<img no-padding no-margin src=“assets/imgs/tie.jpg” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: formalstatus }" />
<h6 no-padding no-margin style=“font-size: .85rem”>FORMAL / CORPORATE</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“garmentFilter(‘casual’)”>
<img no-padding no-margin src=“assets/imgs/casual.png” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: casualstatus }" />
<h6 no-padding no-margin style=“font-size: .85rem”>CASUAL</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“garmentFilter(‘bridal’)”>
<img no-padding no-margin src=“assets/imgs/bridal.png” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: bridalstatus }" />
<h6 no-padding no-margin style=“font-size: .85rem”>BRIDAL</h6>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“garmentFilter(‘allgarment’)”>
<img no-padding no-margin src=“assets/imgs/all.png” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: allgarment }" />
<h6 no-padding no-margin style=“font-size: .85rem”>ALL</h6>
</ion-col>
</ion-row>
<ion-row>
<ion-col style=“margin: 10px auto; " text-center no-padding no-margin>
<h6 style=“font-size: 1.1rem; color: #878787” no-margin>PRICE RANGE</h6>
</ion-col>
</ion-row>
<ion-row no-padding no-margin>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“priceFilter(‘standard’)”>
<img no-padding no-margin src=“assets/imgs/st.png” class=“btncircle2” width=“25px” height=“25px” alt=”" [ngClass]="{‘btncircle’: standstatus }"
/>
<h6 no-padding no-margin style=“font-size: .85rem”>STANDARD</h6>
<span style=“font-size: 9px; color: green”>< ₦16k</span>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“priceFilter(‘pro’)”>
<img no-padding no-margin src=“assets/imgs/p.png” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: prostatus}"
/>
<h6 no-padding no-margin style=“font-size: .85rem”>PRO</h6>
<span style=“font-size: 9px; color: green”>₦16k - ₦51k </span>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“priceFilter(‘high’)”>
<img no-padding no-margin src=“assets/imgs/he.png” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: highstatus }"
/>
<h6 no-padding no-margin style=“font-size: .85rem”>HIGH END</h6>
<span style=“font-size: 9px; color: green”>> ₦51k </span>
</ion-col>
<ion-col style=“margin: 0 auto” text-center no-padding no-margin tappable (click)=“priceFilter(‘anyprice’)”>
<img no-padding no-margin src=“assets/imgs/all.png” class=“btncircle2” width=“25px” height=“25px” alt="" [ngClass]="{‘btncircle’: anyprice }"
/>
<h6 no-padding no-margin style=“font-size: .85rem”>ANY</h6>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<button ion-button class=“lngbtn” type=“submit” (click)=“findtailor()”>Request</button>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-content>
Thanks for sharing this details with me - before I invest my hours in this, can you let me know the ideal budget in your mind?