ngClass не применяется внутри таблицы угловых данных?

Question

Ниже кода не применяется ngClass.

 <table mat-table [dataSource]="dataSourceAB">
  <ng-container matColumnDef="Type">
   <th mat-header-cell *matHeaderCellDef> Type </th>
   <td mat-cell *matCellDef="let element" [ngClass]="(element.TxnType=='Credit')?'text-success':'text-danger'"> {{element.TxnType}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumnsAB"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumnsAB;"></tr>
/table>

Я получаю правильные данные для отображения, но класс не применяется.Wts неправильно ??

Answer 1

добавить text-success и text-danger в css

Демонстрация Stackblitz

Component.html

<table mat-table [dataSource]="dataSourceAB" class="mat-elevation-z8">
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let element" [ngClass]="(element.TxnType=='Credit')?'text-success':'text-danger'"> {{element.TxnType}}
            </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumnsAB"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsAB;"></tr>
</table>