Updating layout about angular-grid-layout

[llorenspujol]

The solution to this error is never mutating the array. It is exposed on the Troubleshoot section, although is complicated to see sometimes, here is what it says:

Mutating the layout would cause an error like: 'ERROR TypeError: Cannot read property 'id' of undefined'. Never mutate the layout, always return a new instance when modifying it.

This is mainly because the Grid needs to know when the layout has changed, and the only way to do it now is just returning a new instance of the array every time it changes.

You can replace 'push' for this code (for example):
this.layout = [...this.layout, { id: '4', x: 0, y: 12, w: 3, h: 3 }];

[Loevbo]

Thanks for your response. I didn't noticed the troubleshoot section (my bad).

When I run the code you provide it updates the array without any error's but the grid is not updated with the new item. Ready your troubleshoot section, I've also tried removing trackBy to make angular update but no luck

Here is the html

<ktd-grid [cols]="cols"
  *ngIf="showgrid"
  [rowHeight]="rowHeight"
  [layout]="layout" class="grid">
  <ktd-grid-item [dragStartThreshold]="20" *ngFor="let item of layout; trackBy:trackById"
    [id]="item.id" class="grid-item">
  </ktd-grid-item>
</ktd-grid>

[llorenspujol]

Have you checked that it is not a change detection issue? Maybe you are running the addItem() outside the zone. To check that, add an item, and after that, make a simple drag on some other grid item, does the item appear? If so, is a change detection issue.

If the above reproduction doesn't make your item appear, you would need to make a stackblitz reproduction of your issue, or provide more information about your code and context to see other possible sources of the error.