While trying to utilize an ion-item as a button, I encountered an issue where an ion-chip with a delete event was triggering the ion-item event instead of the intended ion-chip event. Even when using event.stopPropogation, the problem persisted.
Is there a way to properly trigger the onclick event for the ion-chip?
activity.html
<ion-content>
<ion-list>
<button ion-item style="color: #999" (click)="addProject()">
<span *ngIf="selected_project == null">Project</span>
<div *ngIf="selected_project != null">
<ion-chip color="primary">
<span style="margin-left: 10px"><i class="fa fa-book"> {{ selected_project.name }}</i></span>
<button ion-button clear color="light" (click)="deleteProject($event)">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-chip>
</div>
<ion-icon name="add" item-right></ion-icon>
</button>
</ion-list>
<ion-content>
activity.ts
addProject(){
//some code
}
deleteProject(event){
event.stopPropagation(); //not working
}