diff --git a/package.json b/package.json index 3978545..7953eab 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", + "imagesloaded": "^4.1.3" }, "devDependencies": { "@angular/core": "^2.1.0", diff --git a/src/masonry.ts b/src/masonry.ts index 80c01a3..3b1506d 100644 --- a/src/masonry.ts +++ b/src/masonry.ts @@ -39,9 +39,10 @@ export class AngularMasonry implements OnInit, OnDestroy { ngOnInit() { ///TODO: How to load imagesloaded only if this.useImagesLoaded===true? - // if (this.useImagesLoaded) { - // this._imagesLoaded = require('imagesloaded'); - // } + if (this.useImagesLoaded) { + // npm install imagesloaded before you require + this._imagesLoaded = require('imagesloaded'); + } // Create masonry options object if (!this.options) this.options = {}; @@ -56,11 +57,25 @@ export class AngularMasonry implements OnInit, OnDestroy { this._element.nativeElement.style.display = 'block'; } + // call to Init Masonry + if(this._imagesLoaded) // if _imagesLoaded available + this._imagesLoaded(this._element.nativeElement, this.masonryInit); + else // if _imagesLoaded not available + this.masonryInit(); + } + + ngOnDestroy() { + if (this._msnry) { + this._msnry.destroy(); + } + } + + masonryInit(){ // Initialize Masonry this._msnry = new masonry(this._element.nativeElement, this.options); // console.log('AngularMasonry:', 'Initialized'); - + // Bind to events this._msnry.on('layoutComplete', (items: any) => { this.layoutComplete.emit(items); @@ -70,12 +85,6 @@ export class AngularMasonry implements OnInit, OnDestroy { }); } - ngOnDestroy() { - if (this._msnry) { - this._msnry.destroy(); - } - } - public layout() { setTimeout(() => { this._msnry.layout();