Кнопка действия не работает для строки таблицы Angular Material Expandable

Question

Здесь я пытаюсь отработать кнопку действия (Редактировать) в расширяемой таблице углового материала в каждой строке. Когда я нажимаю кнопку редактирования, это не работает, но строка расширяется.

ВЫПУСК: -

1. При нажатии кнопки «Редактировать» должна работать кнопка, а строка не должна расширяться.
2. Если щелкнуть по другой части строки без кнопки «Редактировать», развернется только строка.

Вот мой код:

viewuser.component.html

<table mat-table [dataSource]="tableData" multiTemplateDataRows class="mat-elevation-z8"><ng-container matColumnDef="Name">
    <th mat-header-cell *matHeaderCellDef>Name </th>
    <td mat-cell *matCellDef="let element">{{ element.f_name }} {{ element.l_name}} </td></ng-container><ng-container matColumnDef="Designation">
    <th mat-header-cell *matHeaderCellDef>Designation </th>
    <td mat-cell *matCellDef="let element"> {{ element.title }}</td></ng-container><ng-container matColumnDef="Department">
    <th mat-header-cell *matHeaderCellDef>Department </th>
    <td mat-cell *matCellDef="let element"> {{element.dept_name}}</td></ng-container><ng-container matColumnDef="Edit">
    <th mat-header-cell *matHeaderCellDef> Edit</th>
    <td mat-cell *matCellDef="let element"><button mat-icon-button><mat-icon color="primary">border_color</mat-icon></button> </td></ng-container><ng-container matColumnDef="expandedDetail"><td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay"><div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"><!--expanded content goes       here --></div></td></ng-container><tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr><tr mat-row *matRowDef="let element; columns: columnsToDisplay;"class="example-element-row" [class.example-expanded-row]="expandedElement === element"(click)="expandedElement = expandedElement === element ? null : element"></tr><tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr></table>

viewuser.component.ts

columnsToDisplay: string[] = ['Name','Designation','Department','Edit'];

Здесь указывается угловой материал. https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html