1

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.

M.Will
  • 27
  • 5

1 Answers1

0

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
}
mak15
  • 367
  • 2
  • 12
  • Thank you. Unfortunately that did not work, all rows still have the style applied (as if they are all odd. If I change to "even" none have the style. Also, the Angular site says ng-deep is being deprecated. Is there another recommended way? https://angular.io/guide/component-styles – M.Will Oct 12 '21 at 18:09
  • Hey, I have edited the code. The problem initially was it was considering each component seperately and a under it. Please give this a try. Also I agree ng-deep is going to be deprecated, but they still recommend it https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep/49308475#49308475 – mak15 Oct 12 '21 at 18:32
  • Thanks again, unfortunately it still did not work. However something changed because if I specify "even" or "odd" the style always gets applied to all rows. – M.Will Oct 12 '21 at 18:51
  • 1
    My mistake (typo, had "nt-child"). I just re-tried your solution and it does indeed work. Thank you. – M.Will Oct 12 '21 at 22:51