Masonry not working with bootstrap 5 and angular 13 - bootstrap-5

Question

I have freshly implemented masonry on my website(https://mypleaks.com) along bootstrap 5 and angular 13.
I have referred example from https://getbootstrap.com/docs/5.1/examples/masonry/ and added <script src="https://cdn.jsdelivr.net/npm/masonry-layout#4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
I have created cards dynamically like below :
<div class="container-lg content-container mt-lg-5 pr-lg-3 pl-lg-3 pt-lg-2 mt-3 p-0">
<div class="row" data-masonry='{"percentPosition": true }' style="position: relative; height: 1068px;">
<div class="col-sm-6 col-lg-4 mb-4" *ngFor="let content of contentList">
<div class="card" [class.remove-card-border]="content.contentType === advertisement">
<img *ngIf="content.attachments" [src]="content.attachments[0].identifier" class="card-img-top">
<div *ngIf="content.contentType != advertisement" class="card-body">
<h5 class="card-title">{{ content.title }}</h5>
<p class="card-text">{{ content.contentText }} <a [href]="content.externalUrl" class="text-nowrap" target="_blank">read more</a></p>
<div class="btn-toolbar d-flex justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-3 input-group" role="group" aria-label="First group" ngbTooltip="good enough, people should know">
<button type="button" [disabled]="evaluationClicked" class="btn btn-success" placement="top"
(click)="upVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
<div class="input-group-prepend">
<div class="input-group-text">{{content.promoteCount}}</div>
</div>
</div>
<div class="btn-group ml-3 input-group" role="group" aria-label="Second group" ngbTooltip="fake or not good enough">
<div class="input-group-prepend">
<div class="input-group-text">{{content.rejectCount}}</div>
</div>
<button type="button" [disabled]="evaluationClicked" class="btn btn-danger" placement="top"
(click)="downVote(content); evaluationClicked = true;"><i class="fa fa-thumbs-down fa-flip-horizontal" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div *ngIf="content.contentType === advertisement" class="d-flex justify-content-center">
<app-google-ads></app-google-ads>
</div>
</div>
</div>
</div>
</div>
Somehow, Style not updating on myPleaks similar to bootstrap example, Refer below snippets
bootstrap example
Thanks in advance for any help.

Answer 1

Instead using masonry-layout directly, I used ngx-masonry. Following are the package.json dependencies. And refer the documentation here
"masonry-layout": "^4.2.2",
"ngx-masonry": "^13.0.0"
Add following modules in app.module.ts
Wrap dynamic code in tag <ngx-masonry [options]="myOptions"> and add following config in the component implementation.
public myOptions: NgxMasonryOptions = {
gutter: 10};