Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry

This 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 ngx-masonry masonry-layout --save

Usage

Import NgxMasonryModule into your app's modules:

``typescript
import { NgxMasonryModule } from 'ngx-masonry';

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

`typescript
@Component({
selector: 'my-component',
template:

,
styles: [

.masonry-item { width: 200px; }

]
})
class MyComponent {
masonryItems = [
{ title: 'item 1' },
{ title: 'item 2' },
{ title: 'item 3' },
];
}
`

Configuration

$3

Append new items synchronously. The order of the items will be preserved, but one image in the middle will block the reset of the images.

`typescript

`

$3

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;
* resize: boolean;
* initLayout: boolean;
* horizontalOrder: boolean;
* animations: NgxMasonryAnimations;

#### Examples

Inline object:

`html

`

From parent component:

`typescript
import { NgxMasonryOptions } from 'ngx-masonry';

public myOptions: MasonryOptions = {
gutter: 10
};
`

`html

`

$3

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.

`html

`

When updateMasonryLayout is updated, the layout() method will be called.

$3

You can create and set customized animations with this option.

`typescript
animations = {
show: [
style({opacity: 0}),
animate('400ms ease-in', style({opacity: 1})),
],
hide: [
style({opacity: '*'}),
animate('400ms ease-in', style({opacity: 0})),
]
}

// To disable animation
animations = {}
`

Note that due to https://github.com/wynfred/ngx-masonry/issues/8 ngx-masonry comes without builtin animations of moving masonry items (when they change size or screen changes size). You can implement them using a css transition. Just add item css class let's say "masonry-item" and add this css code.

`css
.masonry-item {
transition: top 0.4s ease-in-out, left 0.4s ease-in-out;
}
`

$3


When using any lazyload methods layout, you can add masonryLazy attribute to the images.

Note: When using masonryLazy, the layout would have an overlapping issue. If you have this issue, you would need a custom method to maintain the layout, such as adding the fixed width/height to each image. For using the image lazyload method, you can have fallback image and loading indicator is recommended.

Example:
`html

`

Events

$3

Triggered after a layout and all positioning transitions have completed.

> http://masonry.desandro.com/events.html#layoutcomplete

$3

Triggered after an item element has been removed.

> http://masonry.desandro.com/events.html#removecomplete

$3

Should only be used with ordered mode. Triggered after the last item is loaded.

$3

`html

`

FAQ

* How to maintain the order of items if there are images?

* Set [ordered] to true.
* To insert item at the beginning: prepend the item to the array and set prepend to true.

`typescript