Clickable button inside an ion-item whereas the ion-item itself is also clickable


#1

Hello,

I am currently trying to create an usersearch where I put the users which match to my input string into an ion-list.
If I press at a user (which are listed in ion-items) it takes me to their profile page.

My problem now is that I want the users which I do not have marked as friends to have a “+Add” button in the same row as their name which I can click to send them a friendrequest.
When I press the button however it executes both functions (the show profilepage and the friend request).

Is it possible, that when I click on the button inside my ion-item it only executes one function?

My current code looks something like this:

<ion-list [virtualScroll]="items">
        <ion-item *virtualItem="let item" (click)="openUser(item)">
            <ion-avatar item-left><ion-img src="{{item.picture}}"></ion-img></ion-avatar>
            <span>{{item.username}}</span>
            <button ion-button (click)="addClick()" outline item-right>+ Add</button>
       </ion-item>
</ion-list>


Clickable ion-icon inside clickable ion-item
#2

I tried something like this

(click)="addClick();$event.stopPropagation();"

It works on android, but not on iOS.

Did you have any luck?


#3

In my case I had the surrounding component as

<button ion-item>...</button>.

If I remove the button part, and just have ion-item it seems to work…

However it then loses some functionality (ie. I want to disable my button, and that doesn’t exist on ion-item).

Anyway, try that $event.stopPropagation(). It seems to work for me :slight_smile:


#4

Yes this is the solution that worked for me, but I didn’t know that it only works for Android. Thanks!


#5

@JoeyWoidl It works on all platforms if it is an ion-item, but if it is a button then it doesn’t work…

This works:

<ion-item (click)="itemClick()">
  Item 1
  <button item-right (click)="addClick();$event.stopPropagation();">Internal Button</button>
</ion-item>

This appears to work on android only (well in my case):

 <button ion-item (click)="itemClick()">
  Item 1
  <button item-right (click)="addClick();$event.stopPropagation();">Internal Button</button>
</button>

So you should be ok in your case.


Clickable ion-icon inside clickable ion-item
#6

Alright thats good, thanks! :slight_smile:


#7

thank you boss, it’s working perfect…