When I click on the swipe button it also clicks on the parent item

Ionic Framework ionic-v3
1

HI! I have a list with some items. Each item has (click)="openChat(chat.$key) and a swipe item with (click)="deleteChat(chat.$key)

The problem is that when I click on the swipe button to call the deleteFunction it also calls the openChat option. Its like both items responds to the click event.

What am I doing wrong?
Thanks!

<ion-content>
    <ion-list> 
        <ion-item-sliding *ngFor="let chat of chats | async" (click)="openChat(chat.$key)">
            <ion-item>
                <ion-avatar item-left>
                        <img *ngIf="!(chat.info | async).sPicture" src="assets/images/default.jpg">
                        <img *ngIf="(chat.info | async).sPicture" src="{{(chat.info | async).sPicture}}">
                </ion-avatar>
                <span>{{(chat.info | async).sDisplayName}}</span> 
            </ion-item>

            <ion-item-options side="right">
                <button ion-button color="danger" (click)="deleteChat(chat.$key)">Delete</button>
            </ion-item-options>

        </ion-item-sliding>
    </ion-list>
</ion-content>
2

SOLVED!

<ion-content>
    <ion-list> 
        <ion-item-sliding *ngFor="let chat of chats | async" >
            <ion-item (click)="openChat(chat.$key)">
                <ion-avatar item-left>
                        <img *ngIf="!(chat.info | async).sPicture" src="assets/images/default.jpg">
                        <img *ngIf="(chat.info | async).sPicture" src="{{(chat.info | async).sPicture}}">
                </ion-avatar>
                <span>{{(chat.info | async).sDisplayName}}</span> 
            </ion-item>

            <ion-item-options side="right">
                <button ion-button color="danger" (click)="deleteChat(chat.$key)">Delete</button>
            </ion-item-options>

        </ion-item-sliding>
    </ion-list>
</ion-content>