I've implemented a mat-table to display a list of executing Jobs. Alongside each row, there are two buttons (Stop and Re-Run) that users can interact with. What I'm trying to achieve is to have a mat-spinner only show up when a Job is running or when the user clicks on the Re-Run Button. Although I have set up the spinner, it currently displays for all rows when I click on the Re-Run Button. How can I make sure it appears only for the specific row that was clicked?
My HTML code:
<!-- Code for Stop and Re-Run Buttons -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element; let index = index">
<button
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
[disabled]="element.status == 'Completed'"
>
<i class="material-icons" style="color:red"> stop </i>
</button>
<button
mat-icon-button
(click)="re_run_job(element)"
matTooltip="Re-Run the Job"
[disabled]="
element.status == 'Running' ||
element.status == 'Pending'
"
>
<i class="material-icons" style="color:green">
cached
</i>
</button>
</mat-cell>
</ng-container>
<!-- Code for Spinner -->
<ng-container matColumnDef="spinner">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element">
<div *ngIf="displaySpinner;else doNotShowSpinner">
<mat-spinner></mat-spinner>
</div>
<ng-template #doNotShowSpinner>
</ng-template>
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="jobExecStatDisplayedColumns"
></mat-header-row>
<mat-row
*matRowDef="
let row;
columns: jobExecStatDisplayedColumns;
let element
"
class="element-row"
>
</mat-row>
Typescript Code:
displaySpinner: boolean = false;
stop_exec_job(element) {
if (element.status == "Running" || element.status == "Pending") {
//Api to stop Job Execution
this.recommendationService
.stopJobExecution(element.jobId, "Cancelled")
.subscribe(data => {
this.executeJobStop = data;
});
this.displaySpinner = false;
element.status = "Completed";
this.snakbar.statusBar("Job Execution Stopped", "Sucess");
} else {
this.snakbar.statusBar("Job Failed to start", "Failure");
}
}
re_run_job(element) {
if (
element.status == "Cancelled" ||
element.status == "Completed" ||
element.status == "Executed" ||
element.status == "FINISHED"
) {
//Api to Re-Run Job Execution
this.recommendationService
.stopJobExecution(element.jobId, "Running")
.subscribe(data => {
this.executeJobStop = data;
});
this.displaySpinner = true;
element.status = "Running";
this.snakbar.statusBar("Job Execution Started", "Sucess");
} else {
this.snakbar.statusBar("Job Failed to start", "Failure");
}
}
The functionality of the stop and re-run button is working correctly. When clicking stop on a specific row, only that row's status changes. However, clicking run on one row triggers the spinner to appear for all rows, which is not the intended behavior.