declare var imagesLoaded ; import { Component , OnInit , OnDestroy , Input , Output , ElementRef , EventEmitter } from '@angular/core' ; import * as masonry from 'masonry-layout' ; import { MasonryOptions } from './masonry-options' ; @ Component ( { selector : '[masonry], masonry' , template : '<ng-content></ng-content>' } ) export class AngularMasonryComponent implements OnInit , OnDestroy { public _msnry : any ; @ Input ( ) public options : MasonryOptions ; @ Input ( ) public useImagesLoaded = false ; @ Output ( ) layoutComplete : EventEmitter < any [ ] > = new EventEmitter < any [ ] > ( ) ; @ Output ( ) removeComplete : EventEmitter < any [ ] > = new EventEmitter < any [ ] > ( ) ; constructor ( private _element ) { } ngOnInit ( ) { if ( ! this . options . itemSelector ) { this . options . itemSelector = '[masonry-brick], masonry-brick' ; } if ( this . _element . nativeElement . tagName === 'MASONRY' ) { this . _element . nativeElement . style . display = 'block' ; } this . _msnry = new masonry ( this . _element . nativeElement , this . options ) ; this . _msnry . on ( 'layoutComplete' , ( items ) => { this . layoutComplete . emit ( items ) ; } ) ; this . _msnry . on ( 'removeComplete' , ( items ) => { this . removeComplete . emit ( items ) ; } ) ; } ngOnDestroy ( ) { if ( this . _msnry ) { this . _msnry . destroy ( ) ; } } public layout ( ) { setTimeout ( ( ) => { this . _msnry . layout ( ) ; } ) ; } public add ( element ) { let isFirstItem = false ; if ( this . _msnry . items . length === 0 ) { isFirstItem = true ; } if ( this . useImagesLoaded ) { imagesLoaded ( element , ( instance ) => { this . _element . nativeElement . prependChild ( element ) ; this . _msnry . prepended ( element ) ; if ( isFirstItem ) { this . layout ( ) ; } } ) ; this . _element . nativeElement . removeChild ( element ) ; } else { this . _msnry . prepended ( element ) ; if ( isFirstItem ) { this . layout ( ) ; } } } public remove ( element ) { this . _msnry . remove ( element ) ; this . layout ( ) ; } }