title: When appending items dynamically, masonry does not layout them out
body: <p>I am using a Masonry JavaScript grid layout library <a href="https://masonry.desandro.com/" rel="nofollow noreferrer">https://masonry.desandro.com/</a>. I have an issue when appending new items to the grid directly from the DOM using Angular *ngfor which iterate through an a array as follows:</p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;div class="grid-item grid-item--height{{i}}" *ngFor="let i of array"&gt;
     {{i}}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because I am not appending them using the "appended masonry method", masonry does not layout them out. The array is getting new elements every time a user scroll down. So a JavaScript method is called:</p>
  
  <pre><code>onScrollDown() {
   // add another 20 items
   this.sum += 20;
   for (let i = start; i &lt; this.sum; ++i) {
       this.array.push(i);  }
   }
  </code></pre>
  
  <p>When the array get more elements, it automatically creates new html items. So i need to find the way masonry layout them out again after the new items are being created. I tried  calling $grid.masonry('layout') after the elements have being added to the array in the OnScrollMethod but it did not work. 
  I am trying $('.grid').masonry('reloadItems') as well, but calling this method the new items are overlapping the previous ones.</p>
  
  <p>I would appreciate any help.</p>
  
  <p>Update:</p>
  
  <p>I am initializing masonry using my angular initialize component method as follows:</p>
  
  <pre><code>  ngOnInit() {
    this.$grid = jQuery('.grid').masonry({
      // options
      itemSelector: '.grid-item',
      columnWidth: 384,
      gutter: 24
    });
  </code></pre>