VirtualScroll and VirtualItem with NgIf

Ionic Framework ionic-v3
1

Hi,

I’m trying to use NgIf in conjunction with VirtualItems in a VirtualScroll. I haven’t been able to find a solution thread for this issue yet.

Here is the basic idea of what I’m trying to do:

<ion-list [virtualScroll]="list">
    <button *virtualItem="let item" *ngIf="item.prop > 3" ion-item>{{ item }}
    </button>
  </ion-list>

Of course, this results in a template parse error with multiple template bindings on one element.
I’ve tried applying the *virtualItem directive to a parent div and then applying *ngIf to the child button of that div. However, this also renders a div for each instance in the list.

How would I use the NgIf directive to filter the rendered items of the list similar to above?

Thank you

2

Hello,

maybe <ng-container> works as awaited instead <div>

ng-container will not rendered as node in the dom,

Best regards, anna-liebt.

3

Hi,

Thanks for the reply!
It certainly does look better, however after scrolling through the virtual list I get an error:

Uncaught TypeError: Cannot read property 'clientLeft' of null

Here is my code for reference:

<ion-list [virtualScroll]="list">
    <ng-container *virtualItem="let item; let i = index">
      <button  *ngIf="!item" ion-item (click)="itemOnClick(i)">{{ i }}</button>
    </ng-container>
  </ion-list>
4

Hello.
hmmm. I guess somewhat will access the virtualitem and will set clientleft, but ng-container is rendered as comment in the dom.

If I understand it right, then you don’t want button, when item prop greater then 3. Is it maybe possible to filter the array before use?

Best regards, anna-liebt

5

Yeah, That condition was just an example to simplify the problem :wink:
I ended up manipulating the input array before rendering. I guess I just wanted to know if it was possible to render and filter the items using the 2 of the above structural directives (ngIf and virtualItem) rather than manipulating the data beforehand.

This whole thing was a result of ion-select struggling to handle large input list of options :confounded:

Anyways, thanks for the help! :slight_smile:

6

Hello,
if div is a problem with layout, maybe an empty element like<span></span> could help.

Best regards, anna-liebt

1 Like
7