How to Integrate Masonry + Infinite Scroll + Angular

Question

I am trying to integrate a masonry grid with infinite scrolling in an angular 4 application.

I am using for masonry the following library masonry.desandro.com and for infinite scrolling: ngx-infinite-scroll

I am having issues when scrolling, the items are being overlapped. I do not know if i am not initializing it properly. I appreciate any help even it implies to use other libraries that work with angular 4.

My code looks like this:

*plunker

Html:

<div class="search-results" infinite-scroll [infiniteScrollDistance]="2" 
      [infiniteScrollThrottle]="10" (scrolled)="onScrollDown()"
       [scrollWindow]="true">
   <div class="grid">
      <div class="grid-item grid-item--height{{i}}" *ngFor="let i of array">
      {{i}}
   </div>
</div>

My component:

export class HomeComponent implements OnInit {

  ngOnInit() {    
   jQuery(document).ready(function () {
     jQuery('.grid').masonry({
     // options
     itemSelector: '.grid-item',
     columnWidth: 200
     });
   });
 }
array = [];
sum = 20;

modalIsOpen = '';

constructor() {
  for (let i = 0; i < this.sum; ++i) {
  this.array.push(i);
  }
 }

onScrollDown() {

console.log('scrolled!!');
// add another 20 items
const start = this.sum;
this.sum += 20;
  for (let i = start; i < this.sum; ++i) {
   this.array.push(i);
   }
  }
}

Answer 1

I would recommand you to stop using jQuery AND Angular, however you can use this package https://www.npmjs.com/package/angular2-masonry

This one is very easy to use and do not require jQuery, let me know if you need help I'll give you some tips.

For infinite scroll, in Angular, I personnaly use a scroll event listener & display data 4 per 4 on each scroll (my window can contain 4 items max) so every time you scroll you get 4 more items.