0

I have built an Angular Material Table and would like to use class error-text if the [dataSource] returns isActive=false.

I'm trying to do this with no luck:

<table
  mat-table
  [dataSource]="dataSource"
  matSort
  class="mat-elevation-z8 table table-striped"
  [ngClass]="dataSource?.isactive == 'false' ? 'error-text' :''"
>

My class isn't applied to the table.

I understand that I can apply this class to each row of my table, but this seems like the incorrect solution to me:

<ng-container matColumnDef="fullname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      {{ translate("name") }}
    </th>
    <td
      mat-cell
      *matCellDef="let element"
      [ngClass]="element?.isactive == 'false' ? 'error-text' :''"
    >
      {{ element.fullname }}
    </td>
  </ng-container>

Has anyone found a solution where I can simply state the ngClass once and it is applied to the whole table?

Janey
  • 1,260
  • 3
  • 17
  • 39
  • datasource here is an array of elements and not plain object so you cannot do `datasource.something`, if `isactive` means whether the array is empty or not you can use `datasource.length > 0` – Ezzabuzaid Sep 01 '20 at 08:09
  • @Ezzabuzaid makes sense. isactive returns true or false... any ideas? – Janey Sep 01 '20 at 08:14
  • What does `isactive` do? – Ezzabuzaid Sep 01 '20 at 08:32
  • @Ezzabuzaid it simply returns true or false to flag whether this is an active customer. Inactive customers should be displayed in the table with red text. – Janey Sep 01 '20 at 09:17
  • so, you can't apply it to the whole table because each row represent one customer, – Ezzabuzaid Sep 02 '20 at 09:57

0 Answers0