Separate ion-item click from ion-checkbox click. Is it possible?


I have the following markup, an ion-item with a checkbox on the right.

<ion-item *ngFor="let item of standType.items">
                    <ion-icon name="leaf" darkgreen item-left></ion-icon>
                    <ion-label (tap)="test();">{{}}</ion-label>
                    <ion-checkbox red item-right [(ngModel)]="item.checked"

I am trying to achieve 2 different functionality, when a user taps the label, I want them to go to the details page, and when the users taps on the checkbox, I want the checkbox to be checked/unchecked. Any idea how to achieve this with the ion-item ?


1 Like

Personally i think this is bad UX. I wouldn’t expect this to happen. But can’t you add a tap handler to the checkbox?

I’d suggest you create a link/icon to the details.

Thanks for the reply. I am with you on that, it is bad UX, my hands are tied in terms of what design some clients choose. I recommended against that.

What I ended up doing, the transparent button that covers / overlays the ion-item, has a position absolute with left:0,right:0,top:0 etc so I changed the left to be say 80% and then added a tap on the ion-label… Adding tap on ion-checkbox still had the button overlay the ion-label and preventing it from being tapped.

You might be better off using a avatar which toggles the checkbox and changes state depending on the value and hiding the checkbox.