I want to dynamically change the CSS class of a span element in an ngx datatable based on the value.
Here is my HTML code:
<ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="'45'" [scrollbarH]="true" [columnMode]="'force'" [limit]="limit"
[sorts]="[{prop: 'sNo', dir: 'asc'}]">
<ngx-datatable-column *ngFor="let column of displayColumns" [name]="column.name">
<ng-template let-column="column" ngx-datatable-header-template>
<span>{{column.name}}</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
<span [ngClass]="{'label label-primary': row[column.value] === 'Complete', 'label label-warning':row[column.value] === 'Processing' }"
*ngIf="column.name !== 'Actions'">{{row[column.value]}}</span>
<span *ngIf="column.name === 'Actions'">
<button class="btn btn-success mr-1 btn-fab" placement="top"
data-controls-modal="custom-modal-2" data-toggle="modal" data-backdrop="static"
data-keyboard="false" ngbTooltip="View" (click)="SerachInvoice(row , 'custom-modal-2')">
<i class="ft-eye"></i>
</button>
<button class="btn btn-primary mr-1 btn-fab" placement="top" ngbTooltip="Edit"
[disabled]="financeYear" (click)="edit(row)">
<i class="ft-edit"></i>
</button>
<button class="btn btn-warning mr-1 btn-fab" placement="top" ngbTooltip="Print"
(click)="SerachInvoice(row,'printSection')">
<i class="fa fa-paper-plane-o"></i>
</button>
</span>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
In the code above, I am trying to apply a class based on a condition.
<span [ngClass]="{'label label-primary': row[column.value] === 'Complete', 'label label-warning': row[column.value] === 'Processing' }"
I am not able to get the result of the class. Can you please help me understand what may be causing this issue?
Below are the bootstrap classes: https://i.sstatic.net/N46c9.png