VirtualScroller

<tx-virtual-scroller ariaLabel="Items" scrollHeight="240px" [items]="items" [itemSize]="40">  <ng-template txVirtualScrollerItem let-item let-odd="odd">    <div class="item" [class.odd]="odd">{{ item }}</div>  </ng-template></tx-virtual-scroller>

<tx-virtual-scroller  ariaLabel="Days"  orientation="horizontal"  scrollHeight="96px"  [items]="days"  [itemSize]="96">  <ng-template txVirtualScrollerItem let-day>    <div class="day">      <strong>{{ day.number }}</strong>      <span>{{ day.name }}</span>    </div>  </ng-template></tx-virtual-scroller>

<tx-virtual-scroller  ariaLabel="Cells"  orientation="both"  scrollHeight="240px"  [items]="cells"  [itemSize]="[40, 110]">  <ng-template txVirtualScrollerItem let-cell>    <div class="cell">{{ cell }}</div>  </ng-template></tx-virtual-scroller>

<tx-virtual-scroller  ariaLabel="Orders from the server"  lazy  scrollHeight="240px"  [step]="20"  [items]="orders()"  [itemSize]="40"  (lazyLoad)="load($event)">  <ng-template txVirtualScrollerItem let-order>    <div class="item">{{ order }}</div>  </ng-template>  <ng-template txVirtualScrollerLoader>    <div class="item"><tx-skeleton width="60%" height="14px" /></div>  </ng-template></tx-virtual-scroller>

<div class="grid">  <tx-virtual-scroller    ariaLabel="Items with loaders"    showLoader    scrollHeight="200px"    [delay]="250"    [items]="items"    [itemSize]="40"  >    <ng-template txVirtualScrollerItem let-item      ><div class="item">{{ item }}</div></ng-template    >    <ng-template txVirtualScrollerLoader      ><div class="item"><tx-skeleton width="50%" height="14px" /></div    ></ng-template>  </tx-virtual-scroller>  <tx-virtual-scroller    ariaLabel="Items with a mask"    showLoader    scrollHeight="200px"    [delay]="250"    [items]="items"    [itemSize]="40"  >    <ng-template txVirtualScrollerItem let-item      ><div class="item">{{ item }}</div></ng-template    >  </tx-virtual-scroller></div>

<div class="row">  <tx-input-number ariaLabel="Item number" [min]="1" [max]="10000" [(ngModel)]="target" />  <button    txButton    type="button"    label="Scroll to"    severity="secondary"    outlined    (click)="list.scrollToIndex(target - 1)"  ></button>  <button    txButton    type="button"    label="Show at the end"    severity="secondary"    outlined    (click)="list.scrollInView(target - 1, 'to-end')"  ></button></div><tx-virtual-scroller  #list  ariaLabel="Items"  scrollHeight="200px"  [items]="items"  [itemSize]="40"  (scrollIndexChange)="visible.set($event)">  <ng-template txVirtualScrollerItem let-item    ><div class="item">{{ item }}</div></ng-template  ></tx-virtual-scroller><p class="hint">Visible: {{ visible().first }} – {{ visible().last }}</p>

<tx-virtual-scroller  ariaLabel="Contacts"  scrollHeight="240px"  [items]="contacts"  [itemSize]="48">  <ng-template txVirtualScrollerContent let-items let-first="first">    <ul class="list">      @for (contact of items; track $index) {        <li          class="contact"          [attr.aria-posinset]="first + $index + 1"          [attr.aria-setsize]="contacts.length"        >          <strong>{{ contact.name }}</strong>          <span>{{ contact.email }}</span>        </li>      }    </ul>  </ng-template></tx-virtual-scroller>

<tx-virtual-scroller  ariaLabel="Items"  showLoader  loading  scrollHeight="200px"  [items]="items"  [itemSize]="40"  [dt]="tokens">  <ng-template txVirtualScrollerItem let-item    ><div class="item">{{ item }}</div></ng-template  ></tx-virtual-scroller>

<tx-virtual-scroller  ariaLabel="Items"  scrollHeight="200px"  [items]="items"  [itemSize]="40"  [pt]="pt">  <ng-template txVirtualScrollerItem let-item>{{ item }}</ng-template></tx-virtual-scroller>