Ionic4 use ion-item as button including ion-button

Ionic Framework
1

We have a ion-list where we have a ion-item as button to benefice from to hover and ripple effect with an ion-avatar, ion-label and also with a ion-buttons element, this is our code:

<ion-list lines="none">
    <ion-item *ngFor="let user of users" (click)="doSelectUser(user)" button>
        <ion-avatar slot="start">
            <lan-text-avatar [text]="user.username"></lan-text-avatar>
        </ion-avatar>
        <ion-label>
            <h2>{{ user.username }}</h2>
            <!-- <p>{{ user }}</p> -->
        </ion-label>
        <ion-button color="danger" (click)="showRemoveAlert(user.username)" slot="end">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-button>
    </ion-item>
    <ion-item (click)="doSelectUser()" button>
        <!-- <ion-avatar slot="start">
            <ion-icon name="person-add" size="large"></ion-icon>
        </ion-avatar> -->
        <ion-icon name="person-add" slot="start"></ion-icon>
        <ion-label>
            <h2>{{ 'login.Select another user' | translate }}</h2>
        </ion-label>
    </ion-item>
</ion-list>

it looks like this
image

As you can see we have the button property on ion-item where we have also registered the click event. The ion-item has also a ion-button to remove an existing user with his own click event.

The problem is, clicking over the delete button performer both click event, that for the ion-item and also the ion-button one.

We can also remove the click event from ion-item and add one to ion-avatar and one to ion-label but in this case we have some space between the avatar and label where we can click on without perform the none of both click events.

So what is the best way to have an ion-list styled as button with different sub components like a dedicated ion-button but we have the ability to perform different click event without the problem of unrecognized space between some inner components.

We tried to pass for the ion-button click event the event and do the event.preventDefault() but there is no change, both click events are done.

2

OMG probably it was to late,

I think I have to use

event.stopPropagation()

Yeah yeah, I’ll test it tomorrow morning

1 Like
3

Why not make it a grid, with two columns and an ion-item for each button?

<ion-row *ngFor="blah blah...
  <ion-col><ion-item (click)="...selectUser
  <ion-col><ion-item (click)="...deleteUser