Masonry module for Angular (2+)
This package is a fork from https://github.com/jelgblad/angular2-masonry to update it to work for newer Angular releases as no work seems to have been done on it for almost 12 months (at the time of writing this). If I have the time, I will look into further improvements. I can't guarantee any help.
This updated version is also compatible with Angular Universal server side rendering (SSR)
ngx-masonry is in development and not ready for production use. Feel free to install and try it out, but depend on it at your own risk.
Installation
npm install ngx-masonry --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;
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.
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.
Examples
Demo
coming soon