diff --git a/projects/muuri-angular/package.json b/projects/muuri-angular/package.json index 8aa5017..01b2dee 100644 --- a/projects/muuri-angular/package.json +++ b/projects/muuri-angular/package.json @@ -4,7 +4,7 @@ "author": { "name": "Dennis Ameling" }, - "version": "0.1.1", + "version": "0.2.0", "peerDependencies": { "@angular/common": ">=9.0.0", "@angular/core": ">=9.0.0", diff --git a/projects/muuri-angular/src/lib/muuri-grid-item.directive.ts b/projects/muuri-angular/src/lib/muuri-grid-item.directive.ts index 91e501a..2e6308a 100644 --- a/projects/muuri-angular/src/lib/muuri-grid-item.directive.ts +++ b/projects/muuri-angular/src/lib/muuri-grid-item.directive.ts @@ -1,10 +1,10 @@ -import { Directive, ElementRef, Host, OnInit } from '@angular/core'; +import { Directive, ElementRef, Host, OnDestroy, OnInit } from '@angular/core'; import { MuuriGridDirective } from './muuri-grid.directive'; @Directive({ selector: '[muuriGridItem]' }) -export class MuuriGridItemDirective implements OnInit { +export class MuuriGridItemDirective implements OnInit, OnDestroy { constructor(@Host() private tileGrid: MuuriGridDirective, private elRef: ElementRef) {} ngOnInit(): void { @@ -12,4 +12,8 @@ export class MuuriGridItemDirective implements OnInit { // Force refresh the grid to prevent overlapping items this.tileGrid.refresh(); } + + ngOnDestroy(): void { + this.tileGrid.removeItem(this.elRef); + } } diff --git a/projects/muuri-angular/src/lib/muuri-grid.directive.ts b/projects/muuri-angular/src/lib/muuri-grid.directive.ts index b887db2..cc91a24 100644 --- a/projects/muuri-angular/src/lib/muuri-grid.directive.ts +++ b/projects/muuri-angular/src/lib/muuri-grid.directive.ts @@ -42,4 +42,14 @@ export class MuuriGridDirective implements OnInit, OnDestroy { ngOnDestroy(): void { this.destroyLayout(); } + + /** + * Remove an item from the grid. + */ + removeItem(item: ElementRef): void { + const gridItem = this.gridObject.getItem(item.nativeElement); + this.gridObject.remove([gridItem], { + layout: true + }); + } }