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"

You can apply colors to rows based on condition as well.

For an instance if the cell value is equal to 100,then change the color of the row to red.

     <tr class="matheader-row" mat-row *matRowDef="let row; columns: displayColumns;       let i = index; let even = even;" [class.rowStyle]="row['myColumn']=='100'"                [ngClass]="{rowcolor: even}">        </tr>

css

.rowStyle{background-color:red;font-weight: bold;}

Above scenario will work if your columns have myColumn as one of the columns.Also using even property you can apply the required color styling [ngClass]="{rowcolor: even}