How do I conditionally apply css to a mat-row element on hover?

Question

I have a table with rows and when a certain condition is met (for each row) the background color is light red. For every row, on hover, I change the background to light gray. Problem is, I want the special rows (those that get the light red color already) to be colored with a deeper shade of red on hover (And not gray like all the other rows).

Best result I could get is having the red rows color a single column on hover with deep red but the rest of the row is still painted gray.

.css (without the single column coloring bug):

.cheaterRow {
  background-color: rgb(255, 130, 130);
}

.mat-row:hover{
  background-color:rgb(201, 201, 201);
}

.html:

<table
mat-table
[dataSource]="dataSource"
matSort
matSortActive="score"
matSortDirection="desc"
*ngIf="!loadingData; else loading"
class="row"
>
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header 
 class="sortHeader">
        No.
    </th>
    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
  </ng-container>

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
  <td mat-cell *matCellDef="let element">{{ element.name | titlecase }}</td>
</ng-container>

<ng-container matColumnDef="level">
  <th mat-header-cell *matHeaderCellDef>
    <mat-form-field>
      <mat-label>Level</mat-label>
      <mat-select (selectionChange)="onChangeLevel($event.value)">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let level of levels" [value]="level.value">
          {{ level.value | titlecase }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </th>
  <td mat-cell *matCellDef="let element">
    {{ element.level | titlecase }}
  </td>
</ng-container>

<ng-container matColumnDef="score">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Score</th>
  <td mat-cell *matCellDef="let element">{{ element.score }}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
  mat-row
  *matRowDef="let row; let even = even; columns: displayedColumns"
  [class.cheaterRow]="isCheater(row.id)"
></tr>
</table>

I want the entire row to be colored differently (depending on the condition) on hover.

just use ngClass when defined the tr, some like ``? in the simple stackblitz:https://stackblitz.com/edit/angular-vfg99a?file=app/table-basic-example.html — Eliseo, Aug 25 '19 at 13:07

score 2 · Answer 1 · answered Aug 25 '19 at 14:44

make your last tr in your table with your customized condtions by writing classes in your css (my css classes are positive ,negative ,cancelled ,highlight)

<tr 
     [ngClass]="{'positive' :(row.status?row.status===1:false) , 
      'negative' :(row.status?row.status===2:false)  ,
      'cancelled':(row.status?row.status===4:false),
      'highlight': selectedRowIndex == row}"

        mat-row *matRowDef="let row; columns: displayedColumns;">
 </tr>

chrismclarke · Accepted Answer · 2019-08-25T10:38:00.997

1

You could add a data attribute and apply custom css

<tr
  mat-row
  *matRowDef="let row; let even = even; columns: displayedColumns"
  class="row"
  [attr.data-isCheater]="isCheater(row.id)"
></tr>

css

.row{
  background:gray
}
.row[data-isCheater='true']:hover{
  background: red
}

If you have additional conditions and some rows which match multiple then you can simply organise your css so that conditions you want to take priority lower in the .css stylesheet

edited Aug 25 '19 at 10:38

answered Aug 25 '19 at 10:25

chrismclarke

1,995
10
16

1

why not use [ngClass]? – Eliseo Aug 25 '19 at 13:05
yep that would work also, there's a good discussion on classes vs data attributes here: https://stackoverflow.com/questions/17184918/best-practice-class-or-data-attribute-as-identifier – chrismclarke Aug 25 '19 at 14:40

How do I conditionally apply css to a mat-row element on hover?

2 Answers2

Linked