Para visualizar efeito de Zebra em uma lista de dados com “Directive” no Angular5 para mostrar cores alternadas.

Exemplo:
[code]
Zebra Demo
<div matZebra index="0">
Text value 1
</div>

<div matZebra index="1">
Text value 2
</div>

<div *ngFor="let item of rows; let idx = index">
<div matZebra [index]="idx" oddColor="lightcyan" evenColor="lightgray">
{{item.t}}
</div>
</div>

[/code]

Código: ZebraDirective