Angular2 component for Masonry

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

Install package:

• Through npm: npm install angular2-masonry --save

Configure module loader:

• SystemJS: Add the following to SystemJS config:

packages: {
  "angular2-masonry": { "defaultExtension": "js", "main": "index" }
},
map: {
  "angular2-masonry": "node_modules/angular2-masonry" 
}
paths:{
  "masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js"
}

Include Masonry in HTML:

<script src="node_modules/masonry-layout/dist/masonry.pkgd.min.js"></script>

Use in your component:

import { MASONRY_DIRECTIVES } from 'angular2-masonry';

Add MASONRY_DIRECTIVES to @Component's directives-array and use <masonry> and <masonry-brick> in your template:

@Component({
  selector: 'my-component',
  directives: [MASONRY_DIRECTIVES],
  template: `
    <masonry>
      <masonry-brick class="brick">Brick 1</masonry-brick>
      <masonry-brick class="brick">Brick 2</masonry-brick>
      <masonry-brick class="brick">Brick 3</masonry-brick>
      <masonry-brick class="brick">Brick 4</masonry-brick>
    </masonry>
    `,
    styles: [`
      .brick { width: 200px; }
    `]
})

Configuration

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

Options

The options-attribute takes an object with the following properties:

• itemSelector: string;
• columnWidth: number;
• gutter: number;
• percentPosition: boolean;
• stamp: string;
• fitWidth: boolean;
• originLeft: boolean;
• originTop: boolean;
• containerStyle: string;
• transitionDuration: string;
• resize: boolean;
• initLayout: boolean;

Examples

Inline object:

<masonry [options]="{ transitionDuration: '0.8s' }"></masonry>

From parent component:

// Typescript interface:
import { MasonryOptions } from 'angular2-masonry';

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

// Basic object:
public myOptions = {
   transitionDuration: '0.8s'
};

<masonry [options]="myOptions"></masonry>