Working with ionic?

[HugoHeneault]

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?

[rintoj]

You must pass a native element as parentScroll. Eg: scrollingBlock.nativeElement

<div #scrollingBlock>
    <virtual-scroll [items]="items"
        [parentScroll]="scrollingBlock.nativeElement"
        (update)="viewPortItems = $event">
        <input type="search">
        <div #container>
            <list-item *ngFor="let item of viewPortItems" [item]="item">
            </list-item>
        </div>
    </virtual-scroll>
</div>

Please check: https://github.com/rintoj/angular2-virtual-scroll#use-scrollbar-of-parent-block

[HugoHeneault]

Thanks for your reply. I tried

@ViewChild(Content) content: Content;

<virtual-scroll [items]="companies" (update)="viewPortItems = $event"  [parentScroll]="content && content._elementRef.nativeElement.querySelector('.scrollContent')">

But all the items are rendered. :(
Have you ever tried it with ionic?

[as02700]

it work, thanks (querySelector('.scrollContent') => querySelector('.scroll-content'))

@ViewChild(Content)
ionContent;

<virtual-scroll [parentScroll]='ionContent?.getScrollElement()' [items]='vehicles|async' >
    <vehicle *ngFor='let v of viewPortItems' [instance]='v'></vehicle>
</virtual-scroll>

[Avishaidev]

Not success work in ionic2

`<div class="page-bottom" #myContent>

  <virtual-scroll [items]="jobs" (update)="viewPortItems = $event" [childHeight]="200" [parentScroll]="myContent?.nativeElement">

    <div style="height: 200px" *ngFor="let item of viewPortItems">{{item.TRLJOBNOSTR}}</div>
  </virtual-scroll>

</div>`

[Avishaidev]

Solves!!!
Add to virtual-scroll max-height style then its works

[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.

[bellizio]

I have the virtual-scroll working in my Ionic Native app, but have encountered the following issue when scrolling on a touch screen device (iOS or Android):

1. Populate a large list of items (100+)
2. Scroll the list quickly, touching and releasing your finger on screen (i.e. a flicking motion)
3. List appears blank until the screen is touched again

Here is my markup:

<virtual-scroll *ngIf="!showSuggestions && searchResults?.length" 
    [items]="searchResults" (update)="viewPortItems = $event" class="list--search-results" 
    [parentScroll]="content && content._elementRef.nativeElement.querySelector('.scroll-content')">

    <button *ngFor="let result of viewPortItems" ion-item detail-push (click)="onResultSelected(result)">
      <ion-icon item-start color="primary">
        <i class="material-icons">lightbulb_outline</i>
      </ion-icon>
      <h2 ion-text text-wrap color="primary" class="line-clamp">{{ result.mptitle }}</h2>
      <p>{{ result.mpprogram }}</p>
      <ul class="list--item-detail">
        <li>ID: {{ result.mpshortproductid }}</li>
        <li>P: {{ result.mppagecount }}</li>
        <li>DATE: {{ result.mppublisheddate | date:'MM/dd/yy' }}</li>
      </ul>
    </button>

</virtual-scroll>

Any ideas on how to fix this issue?

Update: Adding [bufferAmount]="100" fixed this issue for me. For what it's worth, my list contained a max of 500 items.

[tonypig93]

@Avishaidev not working properly when it fetches more data to the list, it cannot display all items in the viewport.

[faraazc]

@rintoj in ionic 3, when used to load more data (end) or (change) event is not fired when scroll reaches end and as a result the function binding the end event is not called. can you please look in to thanks

<ion-content>

<virtual-scroll [items]="items" (update)="viewPortItems = $event" [parentScroll]="ionContent?.getScrollElement()"
 (end)="onListChange($event)">

      <ion-card *ngFor="let item of viewPortItems" >
        <ion-card-header>
          {{item}}
        </ion-card-header>
        <ion-card-content>
          {{item}}
        </ion-card-content>
      </ion-card>      
    </virtual-scroll>

</ion-content>

 onListChange(event:ChangeEvent) {
  console.log('camee');
  if (event.end !== this.items.length) return;
      setTimeout(function() {
        this.items = this.items.concat("chunkkknk");
      }, 200);
}

[silverio]

hi @faraazc did you find a solution?

[pcsantana]

Anyone tried to use ion-refresher?
When I scroll down (not in the top of the screen), the ion-refresher pushes always.

[pcsantana]

I finally solved the ion-refresher problem.
You should set ion-content as parentScroll (like examples above) and not set the height style to virtual-scroll .

[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;
}

[speige]

Closing as several users have posted working solutions to the issue.

@tonypig93 and @faraazc these appear to be unrelated issues. Please open separate issues if you're still having problems. Thanks.

[speige]

@faraazc is your issue related to #137 or #157 ?