Using the reloadItems function

[sknoth]

Hi,
i am using the masonry grid in an angular 4 project and am adding more items when the user scrolls. Most of the times it is working, but sometimes it seems that not all new items get added to the layout correctly. I use a counter to make sure that all items have been added to the layout before allowing to load more items through scrolling to prevent issues with "cannot remove node" that are also mentioned here in the forum.

ngAfterViewInit() {
   // gets called for every object
   this.masonry.layoutComplete.subscribe((items) => {
     this.itemsAddedToLayout++;
  });
}

...

@HostListener("window:scroll", [])
onWindowScroll(event) {
  if (this.itemsAddedToLayout >= this.itemsToLoad
     && window.scrollY > document.body.offsetHeight - window.innerHeight - 300) {
     this.addMoreProducts();
   }
}

Also what items are shown can be changed by the user through various filtering options.

Therefore I thought one possible solution might be to use the reloadItems() function by the original script, but I don't know how I can access it since it does not seem to be supported by this port of the masonry script.

Any hints or pointers in the right direction would be greatly appreciated.