CODEWITHSUNDEEP
htmlionic-frameworkionic3
lei lei
lei lei

Reputation: 1829

Can I insert a button inside a button item, and make the clicks for different reactions?

For my Ionic project, I want to add a "delete" button inside a button item.

There are two functions, my expectation is that openItem() is triggered when click the button item's img, and another function delete() is triggered when click the "delete" button. However, the "detele" button doesn't work for that purpose when I click it. 

      <button ion-item>
        <ion-avatar item-start (click)="openItem(item)">
          <img [src]="item.profilepic" />
        </ion-avatar>
        <h2>{{item.befollowed_name}}</h2>
        <p>{{item.befollowed_email}}</p>
        <p>{{item.status}}</p>
        <button ion-button color="danger"(click)="delete(item)">delete</button>
        <ion-note item-end *ngIf="item.note">{{item.note}}</ion-note>
      </button>

Can you help how to make the "delete" button work as my expectation?

Upvotes: 1

Views: 95

Answers (1)

Adrian
Adrian

Reputation: 1587

Add an item-content attribute to your delete button.
<button ion-button item-content color="danger"(click)="delete(item)">delete</button>

On a side note, rather than doing above solution can you just use ion-item on your uppermost container?

Then you can just add a cursor: pointer style in the ion-avatar, so that the cursor will change when hovering the image.

e.g.

<ion-item>
    <ion-avatar item-start (click)="openItem(item)">
       <img [src]="item.profilepic" style="cursor: pointer;" />
    </ion-avatar>
    <h2>{{item.befollowed_name}}</h2>
    <p>{{item.befollowed_email}}</p>
    <p>{{item.status}}</p>
    <button ion-button color="danger"(click)="delete(item)">delete</button>
    <ion-note item-end *ngIf="item.note">{{item.note}}</ion-note>
</ion-item>

Upvotes: 1

Related Questions