virtual-scroll-demo.html

<h2>Autosize</h2>

<h3>Uniform size</h3>
<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item"
       [style.height.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<h3>Increasing size</h3>
<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
  <div *cdkVirtualFor="let size of increasingSizeData; let i = index" class="demo-item"
       [style.height.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<h3>Decreasing size</h3>
<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
  <div *cdkVirtualFor="let size of decreasingSizeData; let i = index" class="demo-item"
       [style.height.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<h3>Random size</h3>
<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
  <div *cdkVirtualFor="let size of randomData; let i = index" class="demo-item"
       [style.height.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<h2>Fixed size</h2>

<mat-form-field>
  <mat-label>Behavior</mat-label>
  <mat-select [(ngModel)]="scrollToBehavior">
    <mat-option value="auto">Auto</mat-option>
    <mat-option value="instant">Instant</mat-option>
    <mat-option value="smooth">Smooth</mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field>
  <mat-label>Offset</mat-label>
  <input matInput type="number" [(ngModel)]="scrollToOffset">
</mat-form-field>
<button mat-button (click)="viewport1.scrollToOffset(scrollToOffset, scrollToBehavior);
                            viewport2.scrollToOffset(scrollToOffset, scrollToBehavior)">
  Go to offset
</button>
<mat-form-field>
  <mat-label>Index</mat-label>
  <input matInput type="number" [(ngModel)]="scrollToIndex">
</mat-form-field>
<button mat-button (click)="viewport1.scrollToIndex(scrollToIndex, scrollToBehavior);
                            viewport2.scrollToIndex(scrollToIndex, scrollToBehavior)">
  Go to index
</button>
<p>
  Currently scrolled to item: {{scrolledIndex.get(viewport1) || 0}}
</p>

<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="50" #viewport1
                             (scrolledIndexChange)="scrolled(viewport1, $event)">
  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item"
       [style.height.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<p>
  Currently scrolled to item: {{scrolledIndex.get(viewport2) || 0}}
</p>

<cdk-virtual-scroll-viewport class="demo-viewport demo-horizontal" [itemSize]="50" #viewport2
                             (scrolledIndexChange)="scrolled(viewport2, $event)"
                             orientation="horizontal">
  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item"
       [style.width.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<h2>Observable data</h2>

<button (click)="emitData()">Add item</button>
<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="50">
  <div *cdkVirtualFor="let size of observableData | async; let i = index" class="demo-item"
       [style.height.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<h2>No trackBy</h2>

<button (click)="sortBy('name')">Sort by state name</button>
<button (click)="sortBy('capital')">Sort by state capital</button>
<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
  <div *cdkVirtualFor="let state of statesObservable | async"
       class="demo-state-item">
    <div class="demo-state">{{state.name}}</div>
    <div class="demo-capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

<h2>trackBy index</h2>

<button (click)="sortBy('name')">Sort by state name</button>
<button (click)="sortBy('capital')">Sort by state capital</button>
<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: indexTrackFn"
       class="demo-state-item">
    <div class="demo-state">{{state.name}}</div>
    <div class="demo-capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

<h2>trackBy state name</h2>

<button (click)="sortBy('name')">Sort by state name</button>
<button (click)="sortBy('capital')">Sort by state capital</button>
<cdk-virtual-scroll-viewport class="demo-viewport" [itemSize]="60">
  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: nameTrackFn"
       class="demo-state-item">
    <div class="demo-state">{{state.name}}</div>
    <div class="demo-capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

<h2>Use with <code>&lt;ol&gt;</code></h2>

<cdk-virtual-scroll-viewport class="demo-viewport" autosize #viewport3>
  <ol class="demo-ol" [start]="viewport3.getRenderedRange().start + 1">
    <li *cdkVirtualFor="let state of statesObservable | async" class="demo-li">
      {{state.name}} - {{state.capital}}
    </li>
  </ol>
</cdk-virtual-scroll-viewport>

<h2>Use with <code>&lt;ul&gt;</code></h2>

<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
  <ul class="demo-ul">
    <li *cdkVirtualFor="let state of statesObservable | async" class="demo-li">
      {{state.name}} - {{state.capital}}
    </li>
  </ul>
</cdk-virtual-scroll-viewport>

<h2>Use with <code>&lt;dl&gt;</code></h2>

<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
  <dl class="demo-dl">
    <ng-container *cdkVirtualFor="let state of statesObservable | async">
      <dt class="demo-dt">{{state.name}}</dt>
      <dd class="demo-dd">{{state.capital}}</dd>
    </ng-container>
  </dl>
</cdk-virtual-scroll-viewport>

<h2>Use with <code>&lt;table&gt;</code></h2>

<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
  <table class="demo-ol">
    <tr *cdkVirtualFor="let state of statesObservable | async" class="demo-tr">
      <td class="demo-td">{{state.name}}</td>
      <td class="demo-td">{{state.capital}}</td>
    </tr>
  </table>
</cdk-virtual-scroll-viewport>

<h2>Append only</h2>
<cdk-virtual-scroll-viewport class="demo-viewport" appendOnly [itemSize]="50">
  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-item"
       [style.height.px]="size">
    Item #{{i}} - ({{size}}px)
  </div>
</cdk-virtual-scroll-viewport>

<h2>Virtual scroller with scrolling parent</h2>
<cdk-virtual-scroll-parent-scrolling-example class="demo-resize-example">
</cdk-virtual-scroll-parent-scrolling-example>

<h2>Multi Columns Virtual Scroll (width in pixel)</h2>
<cdk-virtual-scroll-viewport class="demo-multicolumns-viewport" [itemDimension]="{width:160,height:50}">
  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-multicolumns-item">
    Item #{{i}}
  </div>
</cdk-virtual-scroll-viewport>

<h2>Multi Columns Virtual Scroll (width in percentage 30%)</h2>
<cdk-virtual-scroll-viewport class="demo-multicolumns-viewport" [itemDimension]="{width:'30%',height:50}">
  <div *cdkVirtualFor="let size of fixedSizeData; let i = index" class="demo-multicolumns-item-pct">
    Item #{{i}}
  </div>
</cdk-virtual-scroll-viewport>

<h2>Virtual scroller with scrolling window</h2>
<cdk-virtual-scroll-window-scrolling-example [shouldRun]="true">
</cdk-virtual-scroll-window-scrolling-example>