Here is a code snippet that displays a list of products using *ngFor in Angular:
<div class="container-products">
<div class="item-product" *ngFor="let product of ['product A', 'product B', 'product C', 'product D']; let index = index">
<div [ngClass]="{'color-gray': index % 2 === 0}">{{ product }}</div>
</div>
</div>
The CSS used for styling the layout:
.container-products{
display: flex;
flex-wrap: wrap;
}
.item-product{
flex: 50%;
}
.color-gray {
background-color: gray;
}
The result can be seen here: my table with color gray I am wondering what I can use instead of index % 2 === 0 in the HTML to alternate between having the first two items in gray and skipping the next two. Any suggestions are appreciated. Thank you.