Keep the original order of media elements in angular2-masonry plugin

Question

I'm using an angular2-masonry plugin for an angular project, where I need to display the media without changing its order. There is no option available for the angular2-masonry plugin. So is there any way to make it happen?

Thanks.

Answer 1

It is possible to wait for all the images to be loaded before the brick are added using useImagesLoaded, without the dimensions masonry is unable to maintain the desired arrangement.

To add useImagesLoaded:

Include this in your .angular-cli.json import src or in the index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>

Had the use Image attribute set to true:

<masonry [useImagesLoaded]="true"></masonry>

Another option would be to use setTimeout to call reloadItems and layout:

One way to do this would be to first reference the component:

@ViewChild(AngularMasonry) private masonry: AngularMasonry;

Then handle the event:

itemsLoadHandler() {
  setTimeout(() => {
    this.masonry.reloadItems();
    this.masonry.layout();
  });
}

You can also listen for these events:

// Outputs
@Output() layoutComplete: EventEmitter<any[]> = new EventEmitter<any[]>();
@Output() removeComplete: EventEmitter<any[]> = new EventEmitter<any[]>();

ngOnInit() {
  this.masonry.on('layoutComplete', (items: any) => {
    this.layoutComplete.emit(items);
  });
  this.masonry.on('removeComplete', (items: any) => {
    this.removeComplete.emit(items);
  });
}

Hope that helps