title: How to apply some style to the table row in angular material table
body: <p>I have this table :</p>
  
  <pre><code>    &lt;div class="table-container"&gt;
      &lt;table mat-table [dataSource]="dataSource"&gt;
          &lt;mat-divider&gt;&lt;/mat-divider&gt;
  
          &lt;!-- title column --&gt;
          &lt;ng-container matColumnDef="title"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{ 'NOTIFYCATION.NOTIFY_TITLE' | translate }} &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.title}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- code column --&gt;
          &lt;ng-container matColumnDef="description"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{ 'NOTIFYCATION.DESCRIPTION'  | translate }} &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.description}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;!-- code column --&gt;
          &lt;ng-container matColumnDef="receiverDisplayName"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{ 'NOTIFYCATION.RECEIVER_DISPLAY_NAME'| translate }} &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.receiverDisplayName}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;!-- code column --&gt;
          &lt;ng-container matColumnDef="type"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{ 'NOTIFYCATION.TYPE'| translate }} &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.type}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="createdOnUtc"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; {{ 'USER_SUBSCRIBE.createdOnUtc' | translate }} &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt;
                  &lt;span *ngIf="lang=='fa'"&gt;{{ element.createdOnUtc | jalali }}&lt;/span&gt;
                  &lt;span *ngIf="lang!='fa'"&gt; {{element.createdOnUtc | date: 'dd/MM/yyyy hh:mm'}} &lt;/span&gt;
              &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;!-- actions --&gt;
          &lt;ng-container style="color: red;" matColumnDef="actions"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt;
                  {{ 'GENERAL.ACTIONS' | translate }}
              &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row; let i=index;"&gt;
                  &lt;a mat-icon-button [matTooltip]="'TOOLTIP.DETAIL' | translate"&gt;
                      &lt;mat-icon aria-label="Show" (click)="showDetail(row)" class="ic-defualt"&gt;remove_red_eye
                      &lt;/mat-icon&gt;
                  &lt;/a&gt;
                  &lt;button mat-icon-button [matTooltip]="'TOOLTIP.DELETE' | translate" color="accent" uaccess
                      [permission]="':GiftCode:Delete'" (click)="delete(row.id)"&gt;
                      &lt;mat-icon aria-label="Delete"&gt;delete&lt;/mat-icon&gt;
                  &lt;/button&gt;
              &lt;/td&gt;
          &lt;/ng-container&gt;
  
  
  
          &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
          &lt;tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"&gt;
              {{element.bestRider}} &lt;/tr&gt;
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;mat-progress-bar *ngIf="dataSource.loading$ | async" mode="indeterminate"&gt;&lt;/mat-progress-bar&gt;
      &lt;mat-paginator [length]="dataSource.length$ | async" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
          showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to change color of <code>tr</code> to <code>red</code> when <code>isSeen=false</code> .</p>
  
  <p>I try this : </p>
  
  <pre><code>&lt;tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code> .highlight{
      color: white;
      background: #673AB7;
    }
  </code></pre>
  
  <p>but it not worked. </p>
  
  <p>Whats the problem? how can I solve this problem?</p>