How to separate one click event from another?

Ionic Framework ionic-v3
1

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?

2

The only way out as far as I know is to have a link at the bottom of the card

3

Does it help if you use (click)="confirmTrip($event)" and then confirmTrip(click) { click.stopPropagation(); ... ?

1 Like
4

Help me here, please: InAppBrowser Insert CSS by File not Working

5

Yes, this was solution, thank you. SO