(click) and [ngClass] not changing table cell color

Question

Im trying to change the color of a cell within a table once clicked using the following:

<table style="border: 1px solid black;">
    <thead>
        <tr style="border: 1px solid black;" *ngFor="let row of tableData">

            <td style="border: 1px solid black;"
                *ngFor="let column of row" class="{{ column }}"
                [ngClass]="{'selected': column == val }"
                [ngClass]="{'toChange': clicked}"
                (click)="clicked = !clicked">
                {{ column | uppercase }}
            </td>
        </tr>
    </thead>
</table>

When each cell is created during the loop, It also has a click event added to it corresponding to the css styling. However, once a cell is clicked I get no change in color at all.

For reference the css is:

toChange {
     background-color: blue;
}

Anyone care to explain to me why my code doesn't work? Many thanks!

Answer 1

You do have two [ngClass] directives. Put them into a single one and separate them with commas like this:

[ngClass]="{'selected': column == val, 'toChange': clicked}"