ngFor + a static element creates a gap in the grid

First, thank you for this amazing lib! I’m having an issue with the following code snippet:

<ngx-masonry [options]="{ gutter: 15 }">
    <div ngxMasonryItem class="document masonry-item" *ngFor="let number of [0,1,2,3,4]">
        <div class="content">
            <div class="icon">
                <div class="triangle-topright"></div>
                <mat-icon>mic</mat-icon>
            </div>
        </div>
        <div class="label">Record {{number}}</div>
    </div>
    <div ngxMasonryItem class="document new masonry-item" (click)="recordReport">
        <div class="content">
            <div class="icon">
                <div class="triangle-topright"></div>
                <mat-icon>add</mat-icon>
            </div>
        </div>
        <div class="label">Upload a record</div>
    </div>
</ngx-masonry>

the combination of ngFor and a static element seems to create a gap in the grid:

this is not the case without the static element:

Is it possible to use ngx-masonry this way? Otherwise, do you know a workaround?

Thanks!

[femtozer]

Thanks! The ngIf solution works perfectly

Le ven. 10 juil. 2020 à 21:52, wynfred [e-mail] a écrit :

Hello, I’m not sure what’s the root cause here but a workaround would be using ngif to display the extra item after the list are loaded. Or add the item to the array with a “type” property and then ngswitch

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wynfred/ngx-masonry/issues/50#issuecomment-656861427, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADENQOMSSGKVYARKNBRJ6WLR25WQXANCNFSM4OWPTYHQ .

[thesleort]

For me it appears that static elements are added immediately to the list of items, but then after that they are spotted as new items, which means that every static element will add a new empty gap. In my case I have 5 static elements, which means that the total count of items in the masonry is 10.