node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

angular-masonry-ts

Masonry module for Angular2

npm version

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:

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:

import { MasonryModule } from 'angular2-masonry';
 
@NgModule({
  imports: [
    MasonryModule
  ]
})
 @Component({
   selector: 'my-component',
   template: `
     <masonry>
       <masonry-brick class="brick" *ngFor="let brick of bricks">{{brick.title}}</masonry-brick>
     </masonry>
     `,
     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

Options

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:

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

From parent component:

import { MasonryOptions } from 'angular2-masonry';
 
public myOptions: MasonryOptions = { 
  transitionDuration: '0.8s' 
};
<masonry [options]="myOptions"></masonry>

imagesLoaded

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.

<masonry [useImagesLoaded]="true"></masonry>

index.html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>

Events

layoutComplete: EventEmitter<any[]>

Triggered after a layout and all positioning transitions have completed.

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

removeComplete: EventEmitter<any[]>

Triggered after an item element has been removed.

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

Examples

<masonry (layoutComplete)="doStuff($event)" (removeComplete)="doOtherStuff($event)"></masonry>

Demo