Is there a way to target the alternate rows within an Angular Material Table in order to apply different background colors to them?
I have configured my ClaimFileHistoryDataSource class as follows:
claimClientInformation: ClaimFileHistory[];
dataSource : ClaimFileHistoryDataSource;
displayedColumns = ['TypeImg', 'Description', 'Agent'];
export class ClaimFileHistoryDataSource extends DataSource<ClaimFileHistory> {
constructor(private _claimFileHistory: ClaimFileHistory[]) {
super();
}
connect(): Observable<ClaimFileHistory[]> {
return Observable.of(this._claimFileHistory);
}
disconnect() {}
}
During NgInit, I retrieve necessary data from the service and populate the DataSource:
this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
this.claimClientInformation = response;
this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});
The data retrieval process is functioning correctly.
In the HTML, the structure of the Mat-Table is defined like below:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="TypeImg">
<mat-cell *matCellDef="let row"><img [src]='row.TypeImg' height="40px"></mat-cell>
</ng-container>
<ng-container matColumnDef="Description">
<mat-cell *matCellDef="let row">
<div>
<span class="d-block">{{row.Description}}</span>
<span class="d-block">{{row.Date}}</span>
</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Agent">
<mat-cell *matCellDef="let row"> {{row.Agent}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
I am particularly interested in understanding how to differentiate between odd and even table rows, and set unique background colors for each.