Weird white space when not using ng-for

[C-4PO]

       <masonry [options]="myOptions" (layoutComplete)="doStuff($event)">
        <div class="panel-sizer"></div>
        <masonry-brick class="panel panel-width-20">
          heyeyeye
        </masonry-brick>
        <masonry-brick class="panel panel-width-20">
          heyeyeye
        </masonry-brick>
      </masonry>

 .panel-sizer{
  width: $size-unit;
}

.panel {
  margin-top:$buffer;
  height: 200px;
  background-color: #01ff70;
}

.panel-width-20 {
  width: calc(20% - #{$buffer});
}

When not using NG-for it gives me leading white space the size of the squares

[craig2017]

I have this same issue. I just want to manually add bricks without looping over an array and there is a huge space at the top of the page.

I'm happy to contribute the fix. Any ideas on where I might look? It looks like the absolute heights are getting calculated incorrectly.

[peterfeddo]

This is not a permanent solution but a quick fix for @craig2017 could be to put ngIf on the masonry-brick elements and then have then display after the DOM is loaded. This technique resolved the issue for me until a better fix is provided to address the problem.

[rcfrias]

same bug here, I cant believe the only way of using this is with masonry-brick with an *ngFor. Almost exited about finding this lib.