<ion-header>
  <ion-navbar>
    <ion-buttons end>
      <button ion-button icon-only (click)="changeItem()">
        Change random
      </button>
      <button ion-button icon-only (click)="addRandomItem()">
        Add random
      </button>
      <button ion-button icon-only (click)="addItem()">
        Append
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content>

  <div padding>
    <button ion-button (click)="pushPage()">Push Virtual Scroll Page</button>
  </div>


  <ion-list [virtualScroll]="items" [headerFn]="headerFn" [virtualTrackBy]="trackByFn"
    approxItemHeight="46px">

    <ion-item-divider *virtualHeader="let header">
      Header: {{ header }}
    </ion-item-divider>

    <ion-item *virtualItem="let item">
      Item: {{ item.value }} {{ item.someMethod() }}
    </ion-item>

  </ion-list>

  <div padding>
    <button ion-button (click)="addItems()">Add items</button>
  </div>

  <div padding>
    <button ion-button (click)="pushPage()">Push Virtual Scroll Page</button>
  </div>

</ion-content>
