Ionic 2 handles clicks on different parts of an element

Question

I have a card with two buttons. Click on the map to open the details page:

<ion-card *ngFor="let appointment of appointmentList" (click)="goToDetails(appointment)"> <ion-card-header> <ion-item text-wrap> <ion-icon start name="ios-medkit-outline"></ion-icon> {{appointment.ProviderName}} </ion-item> <ion-row> <ion-col width-50> <button full ion-button color="secondary" (click)="confirmTrip()"> Confirm</button> </ion-col> <ion-col width-50> <button full ion-button color="danger" (click)="cancelTrip()"> Cancel</button> </ion-col> </ion-row> </ion-card-header> <ion-list> <ion-item *ngIf="!(appointment.Legs[0].AppTime==='')"> <ion-label> Appointment time </ion-label> <ion-badge item-right> {{appointment.Legs[0].AppTime}} </ion-badge> </ion-item> <ion-item *ngIf="!(appointment.Legs[0].PickUpTime==='')"> <ion-label> Pick up time </ion-label> <ion-badge item-right> {{appointment.Legs[0].PickUpTime}}</ion-badge> </ion-item> <ion-item> <ion-label> Driver status </ion-label> <ion-badge item-right>{{appointment.Legs[0].Status}}</ion-badge> </ion-item> </ion-list> </ion-card> 

Click on the buttons to shoot individual actions. Now clicking on the button displays the details page and these specific actions. Is there any mechanism for splitting buttons on the other side of the map?

Answer 1

I think you need to check the same using event.stopPropagation() for button events:

// HTML

 <ion-item text-wrap> <ion-icon start name="ios-medkit-outline"></ion-icon> {{appointment.ProviderName}} </ion-item> <ion-row> <ion-col width-50> <button full ion-button color="secondary" (click)="confirmTrip($event)"> Confirm</button> </ion-col> <ion-col width-50> <button full ion-button color="danger" (click)="cancelTrip($event)"> Cancel</button> </ion-col> </ion-row> </ion-card-header> 

//Component

 cancelTrip(e){ // e.preventDefault(); // use this to prevent default event behavior e.stopPropagation(); // code to cancel trip } confirmTrip(e){ // e.preventDefault(); // use this to prevent default event behavior e.stopPropagation(); // code to confirm trip }