Incorporating data from a JSON file instead of a database, my goal is to assign a color to the icon based on the status value in the JSON. For instance, [if green? class1:class2]. Here is the code snippet I am working with:
My HTML file
<ng-container matColumnDef="status" [ngClass] = "{'color1': row.status ===
'GREEN', 'color2': row.status === 'RED'}">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let row" class="color1">{{row.status}}</td>
<td mat-cell *matCellDef="let row" class="color2">{{row.status}}</td>
</ng-container>
Below is my JSON file.
data:[
{
"name": "xyz",
"address": "post",
"status": "GREEN"
},
{
"name": "xyz1",
"address": "post1",
"status": "RED"
}
],
"count" : 2
}
This is my CSS
.color1{
color: green;
}
.color2{
color: red;
}
** Facing an issue where I am unable to change the color of the status icon and encountering the following error **
ERROR TypeError: Cannot read property 'status' of undefined