Sliding list buttons fire eachother

Ionic Framework ionic-v3
1

Hi!
I have a sliding list in my Ionic project, where your can accept or decline invitations. My code looks like so :

          <ion-item-sliding *ngFor="let invite of invites">
            <ion-item>
              <h2>{{invite.friend}}</h2>
              <p>Invite expires {{ invite.expiresOn | humanize }}</p>
            </ion-item>
            <ion-item-options side="left">
              <button ion-button color="primary" (click)="acceptInvite($event, invite)">
                <ion-icon name="checkmark-circle"></ion-icon>
                Accept
              </button>
            </ion-item-options>
            <ion-item-options side="right">
              <button ion-button color="danger" (click)="declineInvite($event, invite)">
                <ion-icon name="trash"></ion-icon>
                Delete
              </button>
            </ion-item-options>
          </ion-item-sliding>

Now when you click one of the buttons, the click event of the other button is raised as well. So when you click the accept button, both the accept and the decline button events fire, and when you click the decline button, same story. Any ideas to solve this?

2

Is your ItemSliding the child of a List?

3

Yes it is… It’s child of a list

4

Shouldn’t it be child of a list?

5

Your template looks fine. I believe the problem lies in code you have not posted yet.