html - Is there a way of adding two buttons inside of a button?

Question

I am creating a dropdown component for a notifications tray.

<ce-dropdown #notificationsDropdown
           className="dropdown-menu dropdown-icon">
<button mat-button
        *ngFor="let notification of notifications"
        (click)="markAsRead(notification)"
        class="animated-transition-2">
  <strong *ngIf="notification.read === null">
    {{notification.message | translate: getParamsData(notification)}}
  </strong>
  <span *ngIf="notification.read !== null">
    {{notification.message | translate: getParamsData(notification)}}
  </span>
  <mat-icon class="mdi mdi-delete-forever"
            *ngIf="!isEmptyTray()"
            (click)="deleteNotification(notification)"></mat-icon>
</button>

It should look like this:

As you can see, I have a list of notifications, and for each one of them I create a button with a text that if the notification is read is bold, and I also have a delete icon. When I click on the message I'm supposed to mark the notification as read, and if I click on the icon I should delete it.

The icon was the last addition, but now I realize that when I click on the icon, both actions take place. I want to separate it, but so far I realize that the button is the only one that allows onClick events, right? Cause the other approaches are not working for me.

I've tried this:

  <ce-dropdown #notificationsDropdown
           className="dropdown-menu dropdown-icon">
<div *ngFor="let notification of notifications">
  <button mat-button
          (click)="markAsRead(notification)"
          class="animated-transition-2">
    <strong *ngIf="notification.read === null">
      {{notification.message | translate: getParamsData(notification)}}
    </strong>
    <span *ngIf="notification.read !== null">
      {{notification.message | translate: getParamsData(notification)}}
    </span>
  </button>
  <button mat-button
          (click)="deleteNotification(notification)"
          class="animated-transition-2">
    <mat-icon class="mdi mdi-delete-forever"
              *ngIf="!isEmptyTray()"
              ></mat-icon>
  </button>
</div>

But that is not working for me. It looks like this, even with the display: flex option:

I also tried this:

<ce-dropdown #notificationsDropdown
           className="dropdown-menu dropdown-icon">
<button mat-button
        *ngFor="let notification of notifications"
        class="animated-transition-2">
  <div (click)="markAsRead(notification)">
  <strong *ngIf="notification.read === null">
    {{notification.message | translate: getParamsData(notification)}}
  </strong>
  <span *ngIf="notification.read !== null">
    {{notification.message | translate: getParamsData(notification)}}
  </span>
  </div>
  <mat-icon class="mdi mdi-delete-forever"
            *ngIf="!isEmptyTray()"
            (click)="deleteNotification(notification)"></mat-icon>
</button>

Please does anyone has any idea how can I do it, and keep the for cycle, which is the main reason I want to do this inside of the cycle.

question from:https://stackoverflow.com/questions/65849742/is-there-a-way-of-adding-two-buttons-inside-of-a-button

Answer 1

Please try doing this:

(click)="deleteNotification(notification); $event.stopPropagation()"

It is similar to @Thibs's proposal but in the opposite order because the propagation is from the nested button to the outer one. Therefore you should stop it after you process it locally (your function).