Currently, I am working with a mat-table that displays data from a JSON object. My goal is to filter out all records with an ID of length 5 and then style them using ngClass in my HTML template. How can I achieve this?
Below is the code I am working with:
// JSON-EXAMPLE
{
"success": true,
"myJSON": {
"myList": [
{
"id": 102000,
"name": Alex,
"age": 15
},
{
"id": 10200, // length 5
"name": Peter,
"age": 30
},
{
"id": 12345, // length 5
"name": Andrew,
"age": 34
},
{
"id": 31322323,
"name": Clark,
"age": 40
},
]
}
}
// TS
public highlightedSpecialRows = null;
private loadData() {
this.myService.getData(param).subscribe(
(resp: any) => {
const data = resp.success ? resp.myJSON.myList : null;
if (null !== data && data) {
.....
const filterIdLength = 5;
this.highlightedSpecialRows = data.filter((d) => `${d['id']}`.length >= filterIdLength);
}
}
);
}
// HTML
<td mat-cell *matCellDef="let row; let i = index;" [ngClass]="{ 'highlightedRows': this.highlightedSpecialRows }">....</td>