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?

5
  • 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 Commented Sep 1, 2020 at 8:09
  • @Ezzabuzaid makes sense. isactive returns true or false... any ideas? Commented Sep 1, 2020 at 8:14
  • What does isactive do? Commented Sep 1, 2020 at 8: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. Commented Sep 1, 2020 at 9:17
  • so, you can't apply it to the whole table because each row represent one customer, Commented Sep 2, 2020 at 9:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.