How to change background color of a cell based on condition in ngx-datatable? - angular2-template

Question

I am using ngx-datatable. I want to change background color of any
particular cell based on value/condition. I am unable to change
background color for any particular cell. Whatever i am trying its
changing for entire column.
CSS:
.my-custom-cell-notSet {
background-color: red;
}
.my-custom-cell-yes {
background-color: rgb(51, 255, 102);
}
.my-custom-cell-no {
background-color: yellow;
}
TS:
rows2 = [
{
sno: "2.1",
answers: "Not set",
}, {
sno: "2.2",
answers: "Not set",
}
];
setColorChange(val,RowIndex)
{
this.tableColumnListIndex3 = RowIndex;
this.colorstatus= true;
if (val === 'Not Set' ) {
this.mycolor2 = 'my-custom-cell-notSet';
} else if (val === 'No' ) {
this.mycolor2 = 'my-custom-cell-yes';
} else if (val === 'Yes') {
this.mycolor2 = 'my-custom-cell-no';
} }
HTML:
<ngx-datatable class="material striped ngx-datatable fixed-header
fullscreen" [rows]="rows2" [columnMode]="'force'" [headerHeight]="50"
[footerHeight]="100" [rowHeight]="'auto'">
<ngx-datatable-column
name="S.NO">
<ng-template let-column="column" ngx-datatable-header-template>{{column.name | titleCase}} </ng-template>
<ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>{{row.sno}}</ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngIf="colorstatus==true && mycolor2=='my-custom-cell-notSet'"
name="Answer (y/n)" [cellClass]="mycolor2">
<ng-template let-column="column" ngx-datatable-header-template>
{{column.name | titleCase}}</ng-template>
<ng-template let-row="row" let-rowIndex="rowIndex" ngx-
datatable-cell-template>
<span [hidden]="tableColumnListIndex3==rowIndex&& tableIndex3">
{{(tableColumnListIndex3 == rowIndex && tableIndex3) ? row.answers : row.answers}}
</span><select class="form-control" [(ngModel)]="row.answers"
name="answer3" *ngIf="tableColumnListIndex3==rowIndex && tableIndex3"
class="rowInputs"
(Change)="setColorChange2(row.answers,rowIndex)">
<option
value='Not Set' translate>Not Set
</option>
<option value='Yes' translate>Yes
</option>
<option value='No' translate>No</option>
</select></ng-template>
</ngx-datatable-column>
</ngx-datatable>

Answer 1

I think you need ng-class for this: there is a nice example in the documentation:
link