Masonry layout for Angular 2

Component allows to create an responsive image grid.

View on GitHub

Installation

1. Install the npm package.

npm i ngx-masonry-layout

2. Import module:

import {MasonryLayoutComponent} from 'ngx-masonry-layout/components';

@NgModule({
    declarations: [MasonryLayoutComponent]
})

Usage

myImages = [
	{
		path: 'path_to_image',
		width: natural_width,
		height: natural_height
	}
];
<masonry-layout
	[max-height]="250"
	[gutter]="4"
	[images]="myImages"
	(events)="handleMasonryLayoutEvents($event)"></masonry-layout>

Properties

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.