Ionic 2 handle clicks on different parts of element

Question

I have a card with two buttons. Tap on the card itself should open 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 buttons should fire separate actions. Now, clicking on the button leads to showing details page AND these specific actions. Is there any mechanism to separate buttons click from other part of the card?

Answer 1

I think you have to check the same by 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
}