dynamic css class on a span element - angular 7

Viewed 903

I have a span element in ngx datatable. I want to change the css class dynamically based on the value.

Here's 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 above i need to apply class based on condition

 <span [ngClass]="{'label label-primary': row[column.value] === 'Complete', 'label label-warning': row[column.value] === 'Processing' }"

hear class result unable to getting could u please tell me what the cause ??

bellow is the bootstrap classes enter image description here

1 Answers
Related