Zebra styling

[aleixjf]

Good afternoon! So the issue is that on the original Mat Table I used the odd/even to assign each row a different class and apply "zebra styling":

        <tr
          mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></tr>
        <!-- INFO: We will set odd when it's really even because the header row is also counted! -->
        <tr
          mat-row
          *matRowDef="let row; let even = even; columns: displayedColumns"
          [ngClass]="{ odd: even, even: !even }"
        ></tr>

The issue is that once I use your Directive, the odd/even are reassigned every time an item enter/leaves the visible section, I presume, and it alters the odd/even property to its opposite. The problem is that the CSS is reapplied to that row with the opposite style (on all rows simultaneously), creating a very bad visual effect.