Dashboard using angular-gridster2 - Not rendering properly

I am fairly new to angular and all the different third party tools that are available for use within angular. I am currently trying to incorporate angular-gridster2 for creating a dashboard. My idea was to first create a dashboard with hardcoded data just to see how the dashboard works and then integrate actual data.

The problem is, only the first dashboard widget data is showing. The others are not being rendered as shown in the image below. screenshot of the dashboard component

Grid configuration is as follows :

this.options={
gridType: 'fit',
itemChangeCallback: (item : GridsterItem)=>{
console.info('item has been changed',item);
},
margin: 100,
outerMargin: true,
draggable: {
enabled: true,
},
resizable: {
enabled: true,
},
maxCols: 6,
minCols: 3
};



Hardcoded dashboard widget data is as follows :

this.items=[
{ x: 0, y: 0, cols: 3, rows: 2, content: 'Widget 1' },
{ x: 2, y: 2, cols: 1, rows: 1, content: 'Widget 2' },
{ x: 4, y: 4, cols: 1, rows: 2, content: 'Widget 3' },
{ x: 6, y: 4, cols: 2, rows: 2, content: 'Widget 4' }
];


Template for the component is as follows :

<div class="dashboard-container">
<button (click)="toHome()" class="home-button">Go to Home</button>

<div *ngIf="items.length" class="gridster">
<gridster [options]="options" class="gridster-parent">
<gridster-item
*ngFor="let item of items"
[x]="item.x"
[y]="item.y"
[cols]="item.cols"
[rows]="item.rows"
class="grid-item"
>
<div class="grid-item-content">
<h3>{{ item['content'] }}</h3>
<p>This is {{ item['content'] }}.</p>
</div>
</gridster-item>
</gridster>
</div>
</div>


Are there any solutions for this issue? My angular version is 18.2.8 and angular-gridster2 version is 18.0.1.

Continue reading...