https://github.com/desandro/masonry
Angular Module for displaying a feed of items in a masonry layout usingThis 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)
Installation
npm install ng-masonry-layout --save
If you're using SystemJS add ngx-masonry
and masonry-layout
to your configuration:
packages: ,map:
Usage
Import NgxMasonryModule
into your app's modules:
;
Configuration
Options
Read about Masonry options here: Masonry Options
The 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;
- transitionDuration: string;
- resize: boolean;
- initLayout: boolean;
- horizontalOrder: boolean;
Examples
Inline object:
From parent component:
; public myOptions: MasonryOptions = transitionDuration: '0.8s';
imagesLoaded
NOTE: Will throw error if global
imagesLoaded
not available.
Delay adding brick until all images in brick are loaded.
To activate imagesLoaded set useImagesLoaded
to true
.
index.html:
check the ImagesLoaded website for the latest version.
updateLayout
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.
When updateMasonryLayout
is updated, the layout()
method will be called.
Events
EventEmitter<any[]>
layoutComplete: Triggered after a layout and all positioning transitions have completed.
EventEmitter<any[]>
removeComplete: Triggered after an item element has been removed.
FAQ
- Why is it rendering the tiles twice in prod? This could be the case because of angulars build optimizer. A currently working "workaround" is disabling the build-optimizer in the angular.json file.
For more information refer to this issue:https://github.com/gethinoakes/ngx-masonry/issues/8
Examples
Demo
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.