This package was originally a fork from https://github.com/jelgblad/angular2-masonry to allow it to work with newer versions of Angular.
This updated version is also compatible with Angular Universal server side rendering (SSR)
npm install ngx-masonry masonry-layout --save
NgxMasonryModule into your app's modules:
Append new items synchronously. The order of the items will be preserved, but one image in the middle will block the reset of the images.
ngx-masonry ="masonryOptions" ="true"
Read about Masonry options here: Masonry Options
options-attribute takes an object with the following properties:
- itemSelector: string;
- columnWidth: number | string;
- gutter: number;
- percentPosition: boolean;
- stamp: string;
- fitWidth: boolean;
- originLeft: boolean;
- originTop: boolean;
- containerStyle: string;
- resize: boolean;
- initLayout: boolean;
- horizontalOrder: boolean;
- animations: NgxMasonryAnimations;
From parent component:
;public myOptions: MasonryOptions =;
ngx-masonry has an input property,
updateLayout, which accepts a boolean and will call masonry's
layout() method on a change. It ignores the first change when the component loads.
updateMasonryLayout is updated, the
layout() method will be called.
You can create and set customized animations with this option.
animations =// To disable animationanimations =
Triggered after a layout and all positioning transitions have completed.
Triggered after an item element has been removed.
Should only be used with
ordered mode. Triggered after the last item is loaded.
How to maintain the order of items if there are images?
To insert item at the beginning: prepend the item to the array and set
prependto true.div ngxMasonryItem ="image.prepend" *ngFor="let image of masonryImages"
If item is inserted or the list is shuffled, use
reloadItems()// get referencemasonry: NgxMasonryComponent;// after the order of items has changedthis.masonry.reloadItems;this.masonry.layout;
Why is the transitionDuration option not supported?
The builtin animation of masonry-layout doesn't work with angular well.
For more information refer to this issue:
How to setup if I use SystemJS?
If you're using SystemJS add
masonry-layoutto your configuration:packages:,map:
Where is imagesLoaded?
imagesLoaded is removed in V9. masonry item will support image by default
This repository contains a working app using ngx-masonry as a child module, not as an npm package. You can go to the demo respository to view an app that uses it as an npm package.