k3nsei/ng-in-viewport

<section #firstSection class="example example--first">
  @for (item of items; track item.id; let isLast = $last; let isEven = $even) {
    <div
      class="first-section-child item"
      [class.item--alt]="isEven"
      [class.item--last]="isLast"
      inViewport
      [inViewportOptions]="firstSection | options: 'first' : isEven"
      (inViewportAction)="handleAction($event)">
      {{ item.value }}
    </div>
  }
</section>

<section #secondSection class="example example--second">
  @for (item of items; track item.id; let isLast = $last; let isEven = $even) {
    <div
      class="second-section-child item"
      [class.item--alt]="isEven"
      [class.item--last]="isLast"
      inViewport
      [inViewportOptions]="secondSection | options: 'second' : isEven"
      (inViewportAction)="handleAction($event)">
      {{ item.value }}
    </div>
  }
</section>