Masonry layout for Angular

Demo

http://crystalui.org/components/masonry-layout

Installation

Install the npm package.

``sh
npm i ngx-masonry-layout
`

Import module:

`ts
import {MasonryLayoutModule} from 'ngx-masonry-layout';

@NgModule({
imports: [MasonryLayoutModule]
})
`

Usage


`ts
myImages = [
{
path: 'path_to_image',
width: natural_width,
height: natural_height
}
];
`

`html
[max-height]="250"
[gutter]="4"
[images]="myImages"
(events)="handleMasonryLayoutEvents($event)">
``

Properties

| name | type | description |
|------------------|-------------------------------------|---------------------------------------------------------------------------|
| max-height | number | Maximum row height. |
| gutter | number | Adds space between item elements (it is recommended to use even numbers). |
| class-name | string, { [key: string]: any; } | Adds classes for each item. Supports the same syntax as ngClass. |