Igniteui-angular: igxFor performance

[Eralmidia]

Description

I was trying to use the igxFor on one of our custom components, but I really cannot see any performance improvement over ngFor. The following is a failry heavy component, with a lot of selects ect, so it is kinda chopy when scrolling. Does this kind of syntax not work?

<cp-trigger *igxFor="let trigger of triggers" [trigger]="trigger"></cp-trigger>

[MayaKirova]

The idea of the igxFor is to create a scrollable container where only what you see is currently rendered in the DOM. Basically it virtualizes the content.
For that purpose you would have to set some dimensions for the container and items in order for there to be a scrollable content. If everything is visible, everything is rendered, so there would not be a difference between using ngFor or igxFor.
The following additional properties should be set:
igxForItemSize - The px-affixed size of the items you want to virtualize.
igxForContainerSize - The px-affixed size of the container.
igxForScrollContainer - the scroll orientation – can be “vertical” or “horizontal”.

You can refer to our documentation for more information and code examples:
https://www.infragistics.com/products/ignite-ui-angular/angular/components/for_of.html

Let me know if you have any questions.

[Eralmidia]

Hi Maya. Thanks for the assistance.

So the igxForItemSize will refer to the height on vertical scroll? Does this mean that igxFor will not work unless all the items have the same height?

[MayaKirova]

Yes. Unfortunately at this time we do not support variable heights.
Only variable widths (for horizontal virtualization).

[Eralmidia]

Ok, that explains why I was having trouble trying to implement this in a igx-list. Hope to see support for variable height in the future then. have a nice weekend.