Click event of Button in MatTable doesn't works - html

Question

I'm new to Angular Material and have been implementing the MatTable by fetching the data from the Firebase (Real-time Database). For every Row of the MatTable, I need a button to delete the particular data of the row by its $key. The MatTable, fetching of data and the button shows up properly. Just when the button is clicked, it doesn't calls the delete function given in the click event.
Angular 8.2
Angular Material 8.2.3
Firebase 7.14.1
Typescript 3.5.3
HTML code for MatTable
<mat-table [dataSource]="listData" matSort>
<ng-container matColumnDef="key">
<mat-header-cell *matHeaderCellDef >key</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.$key}}</mat-cell>
</ng-container>
<ng-container matColumnDef="studentPRN">
<mat-header-cell *matHeaderCellDef >PRN</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStudentPRN}}</mat-cell>
</ng-container>
<ng-container matColumnDef="studentName" >
<mat-header-cell *matHeaderCellDef >Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStudentName}}</mat-cell>
</ng-container>
<ng-container matColumnDef="studentClass">
<mat-header-cell *matHeaderCellDef>Class</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStudentClass}}</mat-cell>
</ng-container>
<ng-container matColumnDef="startDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Start Date</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStartDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="endDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>End Date</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveEndDate}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveType">
<mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveType}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveDescription">
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveDescription}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveTeacher">
<mat-header-cell *matHeaderCellDef>Requested to</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveTeacher}}</mat-cell>
</ng-container>
<ng-container matColumnDef="leaveStatus">
<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.leaveStatus}}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button color="warn" (click)="withdrawLeave(row.$key)">
<mat-icon>delete_outline</mat-icon></button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="loading">
<mat-footer-cell *matFooterCellDef colspan="6">Fetching data...</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="noData">
<mat-footer-cell *matFooterCellDef colspan="6">No data found.</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
<mat-row *matRowDef="let rows; columns: displayColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':listData!=null}"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}"></mat-footer-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5,10,20,30]" [pageSize]="5" showFirstLastButtons></mat-paginator>
Typescript for button click event
withdrawLeave($key){
if(confirm("Do you want to withdraw the leave request?")){
this.auth.withdrawLeave($key);
}
Auth Service
leaveList : AngularFireList<any>;
getLeaves(){
this.leaveList = this.firebase.list('Leaves');
return this.leaveList.snapshotChanges();
}
withdrawLeave($key: string){
this.leaveList.remove($key);
}
Typescript for fetching data into MatTable
setAppliedLeaves(){
this.auth.getLeaves().subscribe(list => {
let array = list.map(item => {
return {
$key: item.key,
...item.payload.val()
};
});
this.listData = new MatTableDataSource(array);
this.listData.sort = this.sort;
this.listData.paginator = this.paginator;
});
}

Answer 1

I think the problem is the way you are sending the element to the function.
Here is an example of how I implemented a click - delete.
In the html file:
<ng-container matColumnDef="columndelete">
<th mat-header-cell *matHeaderCellDef>Delete</th>
<td mat-cell *matCellDef="let element">
<h5 (click)="delete(element)"><i class="fa fa-trash"></i>
</h5>
</td>
</ng-container>
and in the ts file:
delete(elm: Details) {
//logic
}
Details is the interface, the type of the element.
BTW, you might want to look at this link https://material.angular.io/components/table/overview,
instead of for example
<mat-table ...>
you should use
<table mat-table ...>