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>
1 Like
I tried something like this
(click)="addClick();$event.stopPropagation();"
It works on android, but not on iOS.
Did you have any luck?
2 Likes
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
Yes this is the solution that worked for me, but I didn’t know that it only works for Android. Thanks!
@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.
5 Likes
Alright thats good, thanks!
gokujy
November 17, 2018, 6:17am
7
thank you boss, it’s working perfect…
Could someone help me with this : Click on Ion-avatar inside ion-item doesnt work
I’ve tried the things you recommend here, but it doesnt work.
acosme
January 19, 2021, 3:22pm
9
Ok guys, solved this using the attribute ‘button’ inside the ‘ion-item’ and setting a timeout in the function;
<ion-item button (click)="itemClick()">
Item 1
<ion-button slot="end" (click)="addClick(); $event.stopPropagation()">
</ion-button>
</ion-item>
itemClick(){
setTimeout(()=>{
}, 200)
}