Masonry layout for Angular
npm install ngx-masonry-layoutInstall the npm package.
``sh`
npm i ngx-masonry-layout
Import module:
`ts
import {MasonryLayoutModule} from 'ngx-masonry-layout';
@NgModule({
imports: [MasonryLayoutModule]
})
`
ts
myImages = [
{
path: 'path_to_image',
width: natural_width,
height: natural_height
}
];
``html
[max-height]="250"
[gutter]="4"
[images]="myImages"
(events)="handleMasonryLayoutEvents($event)">
``| 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. |