Change Color Dynamically for specific data inside a loop

Question

I have a table that I fill with data . I am trying to color data for the first year column. I am trying to achieve:

+--------+------------+------+------+
| YEAR   | 2022       | 2021 | 2020 |
+--------+------------+------+------+
| First  | 0.2(color) | 0.5  | 0.8  |
+--------+------------+------+------+
| Second | 0.1(color) | 0.4  | 0.5  |
+--------+------------+------+------+
| Third  | 0.3(color) | 0.9  | 0.2  |
+--------+------------+------+------+
| Fourth | 0.2(color) | 0.1  | 0.8  |
+--------+------------+------+------+
| Fifth  | 0.6(color) | 0.4  | 0.2  |
+--------+------------+------+------+

My current implementation works like this:

+--------+------------+------------+------------+
| YEAR   | 2022       | 2021       | 2020       |
+--------+------------+------------+------------+
| First  | 0.2(color) | 0.5(color) | 0.8(color) |
+--------+------------+------------+------------+
| Second | 0.1        | 0.4        | 0.5        |
+--------+------------+------------+------------+
| Third  | 0.3        | 0.9        | 0.2        |
+--------+------------+------------+------------+
| Fourth | 0.2        | 0.1        | 0.8        |
+--------+------------+------------+------------+
| Fifth  | 0.6        | 0.4        | 0.2        |
+--------+------------+------------+------------+

I can not use only CSS for this because the first child changes.(I have arrow to loop through years that are displayed in the UI)

HTML:

<tbody>
    <tr *ngFor="let row of titles">
        <td>{{ row.title }}</td>
        <ng-container *ngFor="let year of data">
            <td [ngClass]="row.className">{{ year[row.dataFill]}}</td>
        </ng-container>
    </tr>
</tbody>

Columns:

export const titles = (className) => [
{title: "First Title", dataFill: "first", className: className},
{title: "Second Title", dataFill: "second", className: className},
{title: "Third Title", dataFill: "third", className: className},
{title: "Fourth Title", dataFill: "fourth", className: className},
{title: "Fifth Title", dataFill: "fifth", className: className}
]

TS:

colorChange() {
    const green = 'green';
    const red = 'red';
    const black = 'black';
    
    this.titles.map(x => {
    if(x.dataFill == 'first') {
        if(this.data[0].first < this.data[1].first) {
        x.className = green;
        }
        else if(this.data[0].first > this.data[1].first) {
            x.className = red;
        }
        else {
        x.className = black;
        }
    //etc..etc..
    }
    return x;
  });   
}

CSS:

.green {
    color: green;
}
.red {
    color: red;
}
.black {
    color: black;
}

Answer 1

In your [ngClass], try adding curly brackets as you're still using TS inside your HTML code. Like the following:

[ngClass]="{{row.className}}

Also, I see that you have a typo in your last else blackl <-. There is an extra "L" added.