How to use CSS :nth-child(odd) using Angular component for table rows?-CodePudding

Disclaimer: I am new to Angular.

I have a very simple Angular app that creates a table of items, say "products".

I have a component called "Products" and a sub-component (if that is the terminology) called product-item.

All is working fine save for the styling I want.

In the "Products" component, I have the following HTML:

<table>
<tbody>
<ng-container *ngFor="let product of productList">
<app-product-item [product]="product "></app-product-item>
</ng-container>   
</tbody>
</table>

In the product-item I have:

<tr>
  <td>{{product.Num}}</td>
  <td>{{product.Name}}</td>
</tr>

Now I would like to apply the following style:

tr:nth-child(odd) {background-color: #d46969;}

When I do so in the product-item.component.css file, all rows have the styling, not only the even rows. Can someone explain what I am doing wrong?

Thank you.

CodePudding user response：

Do a ng-deep on app-product-item and that will help you access the inner html

In css

app-product-item:nth-child(odd) ::ng-deep tr{
 // add your styles
}