I'm trying to create alternating row stripes using an *ngFor directive, but the CSS class is applying a gray background to all rows instead.
Here's what I've attempted:
HTML:
<div class="row ml-4" *ngIf="visible">
<div class="divJanelaResultadoParcial" id="autocompletar" class="col-xl-9 divJanelaResultadoParcial">
<a class="divJanelaProduto" *ngFor="let produto of produtos" [routerLink]="['/produtos', produto.id, produto.slug]" >
<div class="row linhaProduto row-striped">
<div class="col-3">
<img class="img" src="{{ produto.foto_prin_1 }}"/>
</div>
<div class="col-6">
<span class="ml-2">{{ produto.nome }}</span>
</div>
<div class="col-3">
<span class="ml-2">{{ produto.preco | currency:'BRL' }}</span>
</div>
</div>
</a>
</div>
</div>
CSS:
.img {
width:60px;
height: 60px;
}
.divJanelaResultadoParcial{
z-index: 20;
}
.linhaProduto{
display: flex;
align-items: center;
}
.row-striped:nth-of-type(odd){
background-color: #efefef;
}
.row-striped:nth-of-type(even){
background-color: #ffffff;
}
This is the desired outcome: