Working with ionic?

Is it working with Ionic3?

I tried but it’s rendering all the items instead of only the ones in the content viewport.

Then I tried to pass the Ionic content with:

<virtual-scroll [items]="companies" (update)="viewPortItems = $event"  parentScroll="content">
    <div *ngFor="let company of viewPortItems">
      <company-stats [company]="company" ></company-stats>
    </div>
</virtual-scroll>

content variable is defined in my page with

export class CompaniesPage {
  @ViewChild(Content) content: Content;
   // more stuff here
}

But I got a Uncaught (in promise): TypeError: parentScroll.addEventListener is not a function

Any ideas? Someone sucessfully implemented it in Ionic?

[Melcus]

The way I got it working for me flawlessly, even with the changing number of elements in the list and images :

HTML

<virtual-scroll [parentScroll]="_content?.getScrollElement()" [ngStyle]="getScrollHeight()"
  [items]="items" (update)="viewPortItems = $event " [childHeight]="96" [bufferAmount]="25">
  <ion-item *ngFor="let media of viewPortItems">

    <ion-thumbnail item-start (click)="clickThumbnail(media)">
      <ng-container *ngIf="media.image; else second">
        <ion-img [src]="media.img_path"></ion-img>
      </ng-container>

      <ng-template #second>
        <ng-container>
          <i class="{{media.icon}}"></i>
        </ng-container>
      </ng-template>
    </ion-thumbnail>

    <div (click)="clickBody(media)" class="text-elipsis" tappable>
      <h2 [innerHTML]="highlight(media.subject, search_key)" class="text-elipsis"></h2>
      <p [innerHTML]="highlight(media.createdate, search_key)" class="text-elipsis"></p>
      <p [innerHTML]="highlight(media.mediatext, search_key)" class="text-elipsis"></p>
    </div>
  </ion-item>
 </virtual-scroll>

CSS

.text-elipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 

To keep the heights consistent.

TS

Below export class @ViewChild(Content) _content: Content;

After you get the data from SQL or whatever, set the [bufferAmount] of elements in viewPortItems so it renders correctly

this.viewPortItems = this.items.length > 25 ? _.slice(this.items, 0, 25) : _.cloneDeep(this.items);

Also add this function . Replace 96 with the height of your element ( childHeight was quite buggy with this one )

getScrollHeight() {
    let styles = {};
    if (this.items.length) {
      styles = {
        'display': 'block',
        'width': '100%',
        'height': this.items.length * 96 + 'px'
      };
    }
    return styles;
}

[bellizio]

How did everyone get this to work with Ionic 3?

After installation and adding the markup to my view, I can’t get past this error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'items' since it isn't a known property of 'virtual-scroll'.

Update: I figured out the issue. I had to import the VirtualScrollModule into the child module (where I’m using virtual-scroll) instead my global app module. I imagine it has something to do with the fact that I’m using lazy-loading for components.