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)
- update the version number to match angular version
masonry-layout
is now a peerDependency, not a dependency- expose
reloadItems()
function - remove
imagesLoaded
and support images loading by default - option
transitionDuration
was removed - use angular animation and support customized animations
- html watcher was removed for better performance. Users need to have their own listener and call
layout()
when certain events are triggered
npm install ngx-masonry masonry-layout --save
Import NgxMasonryModule
into your app's modules:
import { NgxMasonryModule } from 'ngx-masonry';
@NgModule({
imports: [NgxMasonryModule]
})
@Component({
selector: 'my-component',
template: `
<ngx-masonry>
<div ngxMasonryItem class="masonry-item" *ngFor="let item of masonryItems">
{{item.title}}
</div>
</ngx-masonry>
`,
styles: [
`
.masonry-item { width: 200px; }
`
]
})
class MyComponent {
masonryItems = [
{ title: 'item 1' },
{ title: 'item 2' },
{ title: 'item 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;
Inline object:
<ngx-masonry [options]="{ gutter: 10 }"></ngx-masonry>
From parent component:
import { NgxMasonryOptions } from 'ngx-masonry';
public myOptions: MasonryOptions = {
gutter: 10
};
<ngx-masonry [options]="myOptions"></ngx-masonry>
imagesLoaded is removed in V9. masonry item will support image by default
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.
<ngx-masonry [updateLayout]="updateMasonryLayout"></ngx-masonry>
When updateMasonryLayout
is updated, the layout()
method will be called.
You can create and set customized animations with this option.
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 = {}
Triggered after a layout and all positioning transitions have completed.
Triggered after an item element has been removed.
<ngx-masonry (layoutComplete)="doStuff($event)" (removeComplete)="doOtherStuff($event)"></ngx-masonry>
- Why does masonry have wrong order?
The new item is always appended to the list because there is no "insert" function supported in masonry-layout. If the order changed and you want to update the order of items, use reloadItems()
// get reference
@ViewChild(NgxMasonryComponent) masonry: NgxMasonryComponent;
// after the order of items has changed
this.masonry.reloadItems();
this.masonry.layout();
- Why is the transitionDuration option not supported?
The builtin animation of masonry-layout doesn't work with angular well.
For more information refer to this issue:
- How to setup if I use SystemJS?
If you're using SystemJS add ngx-masonry
and masonry-layout
to your configuration:
packages: {
"ngx-masonry": { "defaultExtension": "js", "main": "index" }
},
map: {
"ngx-masonry": "node_modules/ngx-masonry",
"masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js"
}
This repository contains a working app using ngx-masonry as a child module, not as an npm package. You can go to the demo respository to view an app that uses it as an npm package.