CODEWITHSUNDEEP
htmlcssangular
Soraky
Soraky

Reputation: 149

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

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.

Upvotes: 2

Views: 4833

Answers (2)

shashi kumar
shashi kumar

Reputation: 382

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>

Upvotes: 2

chrismclarke
chrismclarke

Reputation: 2105

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

Upvotes: 1

Related Questions