I have a table with various columns, one of which is a status field. I am looking to display colored badges in that column based on the status of each record, which can be "Completed", "Deleted", or "Canceled". I have attempted to use ng-class to dynamically set the colors, but I am struggling to get it working as intended.
Here is an example of how I am trying to implement this:
<!-- Status Column -->
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let row">
<button ng-class="row.OrderStatus">{{row.OrderStatus}}</button>
</td>
</ng-container>
In my CSS, I have defined styles for each status:
.Completed{
background: green;
}
.Cancelled{
background: yellow;
}
.Deleted{
background: red;
}