0

The Idea is that i want to have a Table with 2 rows with color green, then 2 with color yellow, then again with the color green etc, etc. I tried to use :nth-child but it doesn't realy work. I use angular 6 for a automated table and angular material 6 for styling.

Here is the stackblitz I used to experiment on this : https://stackblitz.com/edit/angular-f6vmrt

On request: the screenshot of the Browser;

As you can see the 1st td is blue, while the second is default color (white) Browser screenshot

Sain Linkerty
  • 63
  • 2
  • 13
  • Can you clarify , sharing the html rendered and what you actually get (white, green or yellow background if any bg is painted on tr ... or td if you did select tds. – G-Cyrillus Aug 09 '18 at 11:51
  • In the link you can see my code as well as the browser view. But for you i screenshoted the browser view. – Sain Linkerty Aug 09 '18 at 11:56
  • your link did not show any code to me in between the body tags and the rendering page kept being blank .... so there was nothing to see but that many libraries to load .screenshot is also useless when it is about CSS issue. what's needed is the bit of HTML to style and what you tried ;). – G-Cyrillus Aug 09 '18 at 17:14
  • 1
    @G-Cyr - assuming it was you, please remove your downvote. This is a good question, and the stackblitz example works fine and is useful for finding a solution. – G. Tranter Aug 09 '18 at 19:48
  • @G.Tranter from [the help pages](https://stackoverflow.com/help/how-to-ask): "If it is possible to create a live example of the problem that you can link to (for example, on http://sqlfiddle.com/ or http://jsbin.com/) then do so - but also include the code in your question itself. Not everyone can access external sites, and the links may break over time." – i alarmed alien Aug 09 '18 at 20:46
  • Please post the code you have tried so far, and read the advice on [how to write a good question on StackOverflow](http://stackoverflow.com/help/how-to-ask). – i alarmed alien Aug 09 '18 at 20:47
  • @ialarmedalien - I appreciate the clarification, but this still doesn't deserve to be downvoted which is for a question that 'does not show any research effort, is unclear, or not useful.' The author clearly stated what they wanted to achieve and what they had tried. The image was posted at the request of another user. Not an ideal or perfect question - yes it could have been a little more thorough, but certainly not deserving of a downvote. – G. Tranter Aug 10 '18 at 15:02
  • 1
    hello, i'm assuming that you did not read my comments. ... just clarify your question, so one can help you . Thanks also to make me feel like i wasted my time on you. reread my ealier comments. I do not know you, i just see noway to help you farther from what the question leaves us for clues about your issue, and yes nth-child() seemed to be the way . Your bits of CSS on the link doesn't even show what you tried about this ;) . good luck. – G-Cyrillus Aug 10 '18 at 15:58
  • I dont know how I can clearify this further. I can provide the code as 'i alarmed alien' said. – Sain Linkerty Aug 22 '18 at 08:28

1 Answers1

0

When using multiTemplateDataRows (as in your example), you can use the dataIndex property to apply classes using ngClass. For example (modified excerpt of your code):

<tr mat-row *matRowDef="let element; let i = dataIndex; columns: columnsToDisplay"
    class="example-element-row" 
    [class.example-expanded-row]="expandedElement === element" 
    [ngClass]="i % 2 === 0 ? 'green' : 'yellow'"
    (click)="expandedElement = element">
</tr>
<tr mat-row *matRowDef="let row; let i = dataIndex; columns: ['expandedDetail']"
    class="example-detail-row" 
    [ngClass]="i % 2 === 0 ? 'green' : 'yellow'">
</tr>
G. Tranter
  • 16,766
  • 1
  • 48
  • 68