Click Event of <ion-col> not working in iOS for IONIC 3 Application

Question

I am working with ionic 3 application. My homepage contains a grid of icons and I created a click event for <ion-col> that contain icons.

HTML

<ion-col col-4 text-wrap (click)="changeSubCategory(17)">
    <ion-icon ios="ios-boat" md="md-boat" class="iconstyle primary-font-color"></ion-icon>
    <br>
    <p class="pstyle">Travel</p>
</ion-col>

This event works very well on an Android device but somehow it's not working on iOS device. I am also not getting any error in console.

Answer 1

Just add the tappable directive to your element. Like:

<ion-col text-center tappable (click)="presentSortedFoodModal('sugar')">
    <ion-icon ios="ios-boat" md="md-boat" class="iconstyle primary-font-color"></ion-icon>
    <br>
    <p class="pstyle">Travel</p>
</ion-col>

Answer 2

I solved this issue. My ion-grid was inside ion-list. i remove ion-list and place ion-gird outside <ion-list> and click event start working on the iOS device too.

I am not sure this is correct approach or not but it solved my problem.

better answers still welcome.

thanks

Answer 3

I did face the same problem, removing ion-list solved the problem for me.