CODEWITHSUNDEEP
angularangular-material
agnidé
agnidé

Reputation: 325

Angular 4 Material table highlight a row and change selected row color

I want to change the color of a row when i select it in my mat-table.
I already know it for the background color but I can not change my row color in white if I have selected it in my table

Upvotes: 0

Views: 8147

Answers (2)

Abhishek Kumar
Abhishek Kumar

Reputation: 2539

You can add your default class, say class="table-row" and tabindex="1" to <mat-row> as

<mat-row class="table-row" tabindex="1" 
*matRowDef="let row; columns: displayedColumns;"></mat-row>

And, in css file write

.table-row:focus {
  background: tomato;
  outline: none;
}
.table-row:focus mat-cell {
  color: white; 
}

Stackblitz Demo highlighting table row on click with changed color

Upvotes: 2

Seba Cherian
Seba Cherian

Reputation: 1793

Can you try this:

in html:

  <mat-row [ngClass]="{'selected': selectedRowIndex == row.id}">
    </mat-row>

in css:

.selected {
    color: white;
}

Upvotes: -1

Related Questions