Masonry module for Angular2


> angular2-masonry is in development and not ready for production use.
> Feel free to install and try it out, but depend on it at your own risk.

Installation

npm install angular2-masonry --save

If you're using SystemJS add angular2-masonry and masonry-layout to your configuration:
``json
packages: {
"angular2-masonry": { "defaultExtension": "js", "main": "index" }
},
map: {
"angular2-masonry": "node_modules/angular2-masonry",
"masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js"
}
`

Usage

Import MasonryModule into your app's modules:

` typescript
import { MasonryModule } from 'angular2-masonry';

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

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

{{brick.title}}

,
styles: [
.brick { width: 200px; }
]
})
class MyComponent {
bricks = [
{title: 'Brick 1'},
{title: 'Brick 2'},
{title: 'Brick 3'},
{title: 'Brick 4'},
{title: 'Brick 5'},
{title: 'Brick 6'}
]
}
`

Configuration

$3

Read about Masonry options here: http://masonry.desandro.com/options.html

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;
* transitionDuration: string;
* resize: boolean;
* initLayout: boolean;

#### Examples

Inline object:
`html

`

From parent component:
`javascript
import { MasonryOptions } from 'angular2-masonry';

public myOptions: MasonryOptions = {
transitionDuration: '0.8s'
};
`
`html

`

$3

>NOTE: Will throw error if global imagesLoaded not available.

Delay adding brick until all images in brick are loaded.
To activate imagesLoaded set useImagesLoaded to true.
`html

`
index.html:
`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

`html

``

Demo

* Plunkr: https://plnkr.co/edit/mmi5tk6hvzEazYQUGZUC?p=preview
* Demo project: https://github.com/jelgblad/angular2-masonry-demo