10

I just started with a basic approach so I want to highlight row color conditionally its not throwing any error but does not apply the background-color to the row. I have 5 rows that have riskINdex H , Any idea what is implemented wrong in below code?

app.component.html

<div>
 <mat-table>
  <ng-container matColumnDef="eventType">
        <mat-header-cell *matHeaderCellDef> Event Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.eventType}} </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectedRow(row)" [ngClass]="{ 'high': row.riskIndex === 'High'}"></mat-row>
    </mat-table>
</div>

component.css

.high {
  background-color: red;
}
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
hussain
  • 6,587
  • 18
  • 79
  • 152
  • can you output row.riskIndex? your syntax looks correct, I'm wondering if it's just 'H' instead of High, as you stated at the top? – JBoothUA Dec 05 '17 at 22:08
  • 1
    Try here: [material row highlight](https://stackoverflow.com/questions/45417248/angular-4-material-table-highlight-a-row) – Gady Tal Mar 18 '18 at 12:14

1 Answers1

17

Suppose, You want to highlight mat-row by some model property. lets say highlight when status == Approved.

<tr mat-row *matRowDef="let row; columns: displayedColumns;let entry"[ngClass]="{ 'highlight': entry.status == 'Approved' }"></tr>

In the above line of code,

highlight is css class defined in .css file.

.highlight{
    background: #42A948; /* green */
  }

The above .css file included in component as following.

 @Component({

      styleUrls: ['./expense.component.css'],

    })
TheKingPinMirza
  • 7,924
  • 6
  • 51
  • 81