使用Angular如何停止表格行内复选框单击事件的传播（）？

Question

I have an angular material table with a row showing customers and another child table showing their orders. On clicking anywhere in the row it expands the row for showing the customers orders. When I click in the checkbox in the customer row I don't want the orders child table to open. I have tried a couple of things but with no luck. Can someone recommend what would work with this scenario. Your helps really appreciated, thanks!

I have tried putting (click)="$event.stopPropagation(); on the checkbox, on the container as well and that didnt work. I also tried to make a directive as shown in In Angular, how to stopPropagation() of TR click event when checkbox has change event? but this still does not stop the (click)="expandCollapse(row) on the <tr> from firing.

Checkbox code:

<ng-container *ngIf="column.key == 'all' && column.key !== 'sort'">
  <th mat-header-cell *matHeaderCellDef [style.width.px]="75">
    <mat-checkbox (click)="$event.stopPropagation();
      (change)="$event ? masterToggle() : null"
      [checked]="hasValue() && isAllSelected()"
      [indeterminate]="hasValue() && !isAllSelected()"
    >
    </mat-checkbox>
    <span class="checkbox-text"></span>
  </th>
  <td mat-cell *matCellDef="let row">
    <mat-checkbox
      (change)="$event ? toggle(row.customerId) : null"
      [checked]="isSelected(row.customerId)">
    </mat-checkbox>
  </td>
</ng-container>

Parent material row:

<tr mat-row
  [ngClass]="{'highlighted': isSelected(row.customerId) }"
  *matRowDef="let row; columns: columnKeys;" class="example-element-row"
  [class.example-expanded-row]="isSelected(row.customerId)"
  (click)="expandCollapse(row)" id="rowcustomer-{{row.rowIdex}}">
</tr>

Answer 1

If you followed the documentation sample of Angular Material ( Angular Material)

by default you would have something like below in your component.html file:

 <tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)"
 </tr>

you remove the click event so it would look like below:

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
 </tr>

and it should work