Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

I’ve just had the same issue and have solved it using Will’s comment to the original post, adding a click handler with $event.stopPropagation to the cell as the direct parent to the button. I’ll add it here as a solution in case anyone else comes here looking for the same answer.

I have a Material data table where the row has a click event to take you through to an edit mode and the last column contains a button with a delete action. Obviously you don’t want to be triggering delete and edit at the same time!

Here’s the structure I’ve used that resolves the issue:

Snippet

// Row definition containing a click event
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onEdit(row.id)"></mat-row>

// Definition for the cell containing the button
<ng-container matColumnDef="buttons">
    <mat-header-cell *matHeaderCellDef></mat-header-cell>
    <mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
        <button mat-button (click)="onDelete(group.id)">
            <mat-icon>delete</mat-icon>
        </button>
    </mat-cell>
</ng-container>

Full Table Code

<mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
        <mat-cell *matCellDef="let group">{{ group.name }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="description">
        <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
        <mat-cell *matCellDef="let group">{{ group.description }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="buttons">
        <mat-header-cell *matHeaderCellDef></mat-header-cell>
        <mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
            <button mat-button (click)="onDelete(group.id)">
                <mat-icon>delete</mat-icon>
            </button>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onEdit(row.id)"></mat-row>
</mat-table>

Again, full credit to Will Howell for this solution.