Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources:
Angular: How to change the color of cell table if condition is true
Change HTML table cell background color using Angular JS
Using Angular version 9.1.3
Material version ~9.1.3
I have defined my styles in the app.component.scss file :
.routeRed {
background-color: red;
}
.routeGreen {
background-color: green;
}
I am importing the app.component.scss file using standard Angular practices :
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
Here's how I structured my app.component.html : The <table> is placed within an Angular Material mat-tab, but this shouldn't affect the application of scss styles.
<table border="1" class="table" id="idTableCamelRoutes" matSort
(matSortChange)="sortRoutes($event)" style="width: 100%">
<thead>
<tr>
<th mat-sort-header="routeId">Route Id</th>
...Omitted for conciseness...
</tr>
</thead>
<tbody>
<tr *ngFor="let item of applicationState.camelRoutes">
<td>{{ item.routeId }}</td>
<td>{{ item.routeStatus }}</td>
<td ng-class="{'routeRed' : !(item.routeRunning), 'routeGreen': item.routeRunning}">{{item.routeRunning}}</td>
<td>
The ngFor loop iterates over a collection of CamelRouteBean objects :
export class CamelRouteBean {
routeId: string;
routeStatus: string;
routeRunning?: boolean;
description?: string;
}
I am using item.routeRunning (a boolean) for ng-class...I have confirmed that item.routeRunning is correctly set to true or false. The app.component.scss file is also successfully loaded. However, regardless of what I attempt, the background color of the Table Cell stays white. When inspecting the Element in Chrome, no styles are found to be applied to the table cell(s).
What could I be overlooking?
Thank you in advance adym