ons-lazy-repeat

[OnsenUI]

Using this component a list with millions of items can be rendered without a drop in performance. It does that by “lazily” loading elements into the DOM when they come into view and removing items from the DOM when they are not visible.

Click here to see the original article

[DaveyK65]

Does anyone have a Lazy Repeat example using the delegate function logic for Angular 2?

[munsterlander]

@DaveyK65 Is this what you are looking for? https://tutorial.onsen.io/?framework=angular2&category=Reference&module=lazy-repeat

[DaveyK65]

@munsterlander: Thank you but no it is using the delegate properties - configureItemScope,calculateItemHeight,countItems destroyItemScope. All I can find are examples using AngularJS ( https://onsen.io/blog/onsenui-1-2-2-new-components-lazy-repeat/ ) and I can seem to convert it correctly to Angular 2.

[patricklwc]

@DaveyK65 could you show me how you converted the angular 1 delegate to angular 2? I tried converting but still no avail.

[aboteler]

I am trying to use ons-lazy-repeat with angular 5, and it appears to be not working right. First thing I found out is to reset the list with new data, I had to first set the array to empty and then a half a second later set the array to the final values.

this.lazyData = [];
setTimeout( () => {
     this.lazyData = response.data;
     this.lazyRepeat.refresh();
});

Now the bug I am stuck on is when the list is large enough to require scrolling, the list is actually repeated three times in series. The list has 17 ons-list-items in it. I am using onsenui v2.9.1