angular 12 and bug fixes

Author: Yongnan Wu

.gitignore

@@ -0,0 +1,61 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+dist/*
+

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change log
 
+## 12.0.0
+
+- Angular 12 upgrade
+- fix space created by pre-loaded item
+- SSR check in `remove` function
+
 ## 11.0.2
 
 - fix item missing when it doesn't contain image and has ordered mode enabled

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-masonry",
-  "version": "11.0.2",
+  "version": "12.0.0",
   "description": "Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry",
   "keywords": [
     "angular",
@@ -22,8 +22,8 @@
     "url": "https://github.com/wynfred/ngx-masonry/"
   },
   "peerDependencies": {
-    "@angular/common": "^11.0.0",
-    "@angular/core": "^11.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/core": "^12.0.0",
     "masonry-layout": "^4.2.0"
   },
   "dependencies": {

src/lib/ngx-masonry.component.ts

@@ -63,6 +63,7 @@ export class NgxMasonryComponent implements OnInit, OnChanges, OnDestroy {
       this.masonryInstance.on('removeComplete', (items: any) => {
         this.removeComplete.emit(items);
       });
+      this.masonryInstance.items=[];
     }
   }
 
@@ -121,28 +122,28 @@ export class NgxMasonryComponent implements OnInit, OnChanges, OnDestroy {
 
   private itemLoaded(item: NgxMasonryDirective) {
     if(isPlatformBrowser(this.platformId)){
-	// Tell Masonry that a child element has been added
-	  if (item.prepend) {
-	    this.masonryInstance.prepended(item.element.nativeElement);
-	 } else {
-	    this.masonryInstance.appended(item.element.nativeElement);
-    	}
-
-        // Check if first item
-        if (this.masonryInstance.items.length === 1) {
-           this.masonryInstance.layout();
-        }
-        item.playAnimation(true);
+      // Tell Masonry that a child element has been added
+      if (item.prepend) {
+        this.masonryInstance.prepended(item.element.nativeElement);
+      } else {
+        this.masonryInstance.appended(item.element.nativeElement);
+      }
+
+      // Check if first item
+      if (this.masonryInstance.items.length === 1) {
+          this.masonryInstance.layout();
+      }
+      item.playAnimation(true);
     }
   }
 
-	public remove(element: HTMLElement) {
-		if (isPlatformBrowser(this.platformId)) {
-			// Tell Masonry that a child element has been removed
-			this.masonryInstance.remove(element);
+  public remove(element: HTMLElement) {
+    if (isPlatformBrowser(this.platformId)) {
+      // Tell Masonry that a child element has been removed
+      this.masonryInstance.remove(element);
 
-			// Layout items
-			this.layout();
-		}
-	}
+      // Layout items
+      this.layout();
+    }
+  }
 }

src/test.ts

@@ -1,7 +1,7 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+import 'zone.js';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,