Dynamically remove an element

[JamesJinnn]

When i try add an element it works great. Unfortunately, when i try to remove an element. it's didn't dynamically removed. it's leave a space over there.

[dennisameling]

@JamesJinnn Thanks for reporting this issue. This is probably similar to https://github.com/dennisameling/muuri-angular/issues/5. I think it should suffice if I add an ngOnDestoy() to the GridItemDirective which triggers this.tileGrid.refresh() so that the grid is updated when an item is removed. I'll have a look at this in the coming days.

Just to be sure:

• How are you currently deleting items dynamically? Ideally with some example code so I can reproduce more easily 😊
• If you try to resize your browser screen when you see this gap, does it re-order the grid and fix the gap automatically?

[JamesJinnn]

@dennisameling it does re-order the grid and fix the gap automatically after i resize your browser screen. here is how i did for deleting items

 remove(item) {
    const find = this.tests.find(test => test === item);
    const ind = this.tests.indexOf(find);
    this.tests.splice(ind, 1);
  }

[ubergeoff]

I believe removing an item has changed slightly in murri >= v0.9.0. As it now expects an array:

Was playing around and found something that helped me:

When the item is destroyed:

ngOnDestroy(): void {
        this.tileGrid.removeItem(this.elRef);
    }

Then find this item and remove it from the grid:

removeItem(item: ElementRef) {
        const found = this.grid.getItems().find((t) => t._element === item.nativeElement);

        if (this._isInit && found) {
            this.grid.remove([found], { layout: true });
        }
    }

Demo with removing here: https://www.flingo.co.za/muuri/dashboard1

Code with directive here: https://github.com/ubergeoff/flingo/blob/master/libs/muuri/src/lib/directives/tile-grid.directive.ts

[dennisameling]

Thanks @ubergeoff for catching this. There is an even easier way to create the removeItem function which I just committed in https://github.com/dennisameling/muuri-angular/commit/56162d9f5ca8d968ed864187758a53f2a8ac5f2c. You can basically get the Muuri grid item by just passing the nativeElement to getItem().

@JamesJinnn can you try the new 0.2.0 version of this library please? Let's say you have the following code:

<button id="add-item-button" (click)="addToGrid()">+ Add new block</button>
<br><br>
<div #grid class="grid" muuriGrid [config]="layoutConfig">
    <div class="grid-item" muuriGridItem *ngFor="let item of blockItems">
        <div class="grid-item-content">
            {{ item }}
        </div>
    </div>
</div>

If you now remove an item from the blockItems array, the corresponding Muuri grid item is also removed and no gap should be visible.

Please let me know if that fixes the issue for you, so we can go ahead and close this issue 😊