I am working with a mat-table that displays a list of executing Jobs. Currently, there are stop and re-execute buttons in front of all the rows. However, I now want to only show the button on the first row. How can I achieve this?
Here is the code for the buttons in my mat-table:
<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' || element.status == 'FINISH'"
>
<!-- Edit icon for row -->
<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>