From b3424b62429dd0d859adc550141e23c6ff4ed46a Mon Sep 17 00:00:00 2001
From: Damian Bartumeu <Damian Bartumeu>
Date: Sun, 23 Apr 2017 22:14:54 -0400
Subject: [PATCH 1/2] Added observer when a brick element changes their size -
 we can triger layout() at that point.

---
 .gitignore   |  1 +
 package.json |  3 ++-
 src/brick.ts | 13 ++++++++++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2957ff1..0bb22f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@ npm-debug.log*
 
 # Visual studio config
 .vscode/
+.idea
 
 # OS generated files
 Thumbs.db
diff --git a/package.json b/package.json
index 3978545..935ac52 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "Angular2 component for https://github.com/desandro/masonry",
   "main": "angular2-masonry.js",
   "dependencies": {
-    "masonry-layout": "^4.1.1"
+    "masonry-layout": "^4.1.1",
+    "element-resize-detector": "^1.1.9"
   },
   "devDependencies": {
     "@angular/core": "^2.1.0",
diff --git a/src/brick.ts b/src/brick.ts
index b5db20d..eea3af6 100644
--- a/src/brick.ts
+++ b/src/brick.ts
@@ -15,6 +15,7 @@ import {
 } from '@angular/core';
 
 import { AngularMasonry } from './masonry';
+import elementResizeDetectorMaker  from 'element-resize-detector';
 
 @Directive({
     selector: '[masonry-brick], masonry-brick'
@@ -37,21 +38,27 @@ export class AngularMasonryBrick implements OnDestroy, AfterViewInit {
 
     /** When HTML in brick changes dinamically, observe that and change layout */
     private watchForHtmlChanges(): void {
+        let self = this;
         MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
         if (MutationObserver) {
             /** Watch for any changes to subtree */
-            let self = this;
-            let observer = new MutationObserver(function(mutations, observerFromElement) {
+            let subtreeObserver = new MutationObserver(function(mutations, observerFromElement) {
                 self._parent.layout();
             });
 
             // define what element should be observed by the observer
             // and what types of mutations trigger the callback
-            observer.observe(this._element.nativeElement, {
+            subtreeObserver.observe(this._element.nativeElement, {
                 subtree: true,
                 childList: true
             });
         }
+
+        let DimensionsObserver = elementResizeDetectorMaker();
+        DimensionsObserver.listenTo( this._element.nativeElement, element => {
+            self._parent.layout();
+        })
+
     }
 }

From 1beea408424decf7f0b5370bcc1457132f916cec Mon Sep 17 00:00:00 2001
From: Damian Bartumeu <Damian Bartumeu>
Date: Mon, 24 Apr 2017 07:56:31 -0400
Subject: [PATCH 2/2] Upgrading package.json

---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 935ac52..9073f80 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "angular2-masonry",
+  "name": "angular-masonry-ts",
   "version": "0.4.0",
   "description": "Angular2 component for https://github.com/desandro/masonry",
-  "main": "angular2-masonry.js",
+  "main": "angular2-masonry.ts",
   "dependencies": {
     "masonry-layout": "^4.1.1",
     "element-resize-detector": "^1.1.9"
@@ -23,7 +23,7 @@
   "typings": "./index.d.ts",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jelgblad/angular2-masonry.git"
+    "url": "git+https://github.com/dbartumeu/angular2-masonry.git"
   },
   "keywords": [
     "angular2",
@@ -36,5 +36,5 @@
   "bugs": {
     "url": "https://github.com/jelgblad/angular2-masonry/issues"
   },
-  "homepage": "https://github.com/jelgblad/angular2-masonry#readme"
+  "homepage": "https://github.com/dbartumeu/angular2-masonry#readme"
 }