removeItem: Couldn't find the specified grid item for the id: 0 in katoid-angular-grid-layout.mjs:1637 about angular-grid-layout

[llorenspujol]

The problem is that you are deleting a grid item from the layout, but not from your html. Check out this code:

<ktd-grid [cols]="cols"
          [rowHeight]="rowHeight"
          [layout]="layout"
          [compactType]="compactType"
          [gap]="gap"
          (layoutUpdated)="onLayoutUpdated($event)"
          (gridItemResize)="onGridItemResize($event)">
    <ktd-grid-item id="0">
        <div>Card 0</div>
        <div class="grid-item-remove-handle" (mousedown)="stopEventPropagation($event)" (click)="removeItem('0')">
        </div>
    </ktd-grid-item>
    <ktd-grid-item id="1">
        <div>Card 1</div>
        <div class="grid-item-remove-handle" (mousedown)="stopEventPropagation($event)" (click)="removeItem('1')">
        </div>
    </ktd-grid-item>
    <ktd-grid-item id="2">
        <div>Card 2</div>
        <div class="grid-item-remove-handle" (mousedown)="stopEventPropagation($event)" (click)="removeItem('2')">
        </div>
    </ktd-grid-item>
</ktd-grid>

All 3 grid items will always be projected even if they are removed! Later, Angular Grid Layout can't find the grid item projected in the layout, here the error.

The recommended solution is render the grid items using the layout value:

<ktd-grid
  [cols]="cols"
  [rowHeight]="rowHeight"
  [layout]="layout"
  [compactType]="compactType"
  [gap]="gap"
  (layoutUpdated)="onLayoutUpdated($event)"
  (gridItemResize)="onGridItemResize($event)"
>
  <ktd-grid-item *ngFor="let layoutItem of layout" [id]="layoutItem.id">
    <div>Card {{ layoutItem.id }}</div>
    <div
      class="grid-item-remove-handle"
      (mousedown)="stopEventPropagation($event)"
      (click)="removeItem(layoutItem.id)"
    ></div>
  </ktd-grid-item>
</ktd-grid>

Here is an stackblitz fork with the solution stackblitz

[arminus]

Thanks, but I'm already using this approach form the playground project:

  removeItem(id: string) {
    // Important: Don't mutate the array. Let Angular know that the layout has changed creating a new reference.
    this.layout = this.ktdArrayRemoveItem(this.layout, item => item.id === id);
  }

  /**
   * Removes and item from an array. Returns a new array instance (it doesn't mutate the source array).
   * @param array source array to be returned without the element to remove
   * @param condition function that will return true for the item that we want to remove
   */
  private ktdArrayRemoveItem<T>(array: T[], condition: (item: T) => boolean) {
    console.log('ktdArrayRemoveItem');
    const arrayCopy = [...array];
    const index = array.findIndex(item => condition(item));
    if (index > -1) {
      arrayCopy.splice(index, 1);
    }
    return arrayCopy;
  }

[llorenspujol]

@arminus Can you share the code where this error occurs? A reproduction in stackblitz would be nice.

[arminus]

Here you go:

https://stackblitz.com/edit/angular-stpfqg?file=src/app/app.component.ts

Click on one of the X buttons to see the issue