Alternate row colours angular material table
Use Following CSS in your .css or .scss file to set the different style for even/odd row:
.mat-row:nth-child(even){
background-color: red;
}
.mat-row:nth-child(odd){
background-color: black;
}
Updating this answer with a newer approach to future developers who may come to this question.
Material Angular now offers some variables to row indexes.
<mat-row *matRowDef="
let row;
let even = even;
columns: displayedColumns;"
[ngClass]="{gray: even}"></mat-row>
In you CSS file: .gray { background-color: #f5f5f5 }
There are other properties like: index
, count
, first
, last
, even
and odd
.
You can find out more on Angular Docs, more specifically on section "Table showing each row context properties"