Force Relayout Calculation

[CR34L]

When changing the item class per runtime (button click e.g.) from 2-col layout to 1-col layout or similar the masonry.layout() method ignore it.

<ng-masonry-grid #grid (onNgMasonryInit)="onNgMasonryInit($event)">
 <ng-masonry-grid-item class="card" [ngClass]="getCustomGridClass()">
 </ng-masonry-grid-item>
</ng-masonry-grid>

getCustomGridClass() returns a suitable css media query. All is fine if the browser window is resized. Calling a window.dispatchEvent(new Event('resize')); doesnt work.

So if you call this.masonry.reloadItems() or this.masonry.layout(); doesnt trigger the layout calculator. The only way to get it done is by calling reOrderItems() but this causes a unnecessary performance impact if the grid is full of items.

Workaround for layout changes on the fly is getting done by using the timeout function:

changeGridClass(style: GridClass) {
   this.gridClass = style;
   const that = this;
   setTimeout(function() {
     that.masonry.layout();
   }, 10);
 }``