Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wynfred/ngx-masonry

Angular Module for displaying a feed of items in a masonry layout
https://github.com/wynfred/ngx-masonry

angular angular5 angular6 angular9 masonry masonry-grid masonry-layout ngx ngx-masonry

Last synced: about 1 month ago
JSON representation

Angular Module for displaying a feed of items in a masonry layout

Awesome Lists containing this project

README 

        
# Angular Module for displaying a feed of items in a masonry layout using [https://github.com/desandro/masonry](https://github.com/desandro/masonry)



This package was originally a fork from [https://github.com/jelgblad/angular2-masonry](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)



[![npm version](https://badge.fury.io/js/ngx-masonry.svg)](https://www.npmjs.com/package/ngx-masonry)



## 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: `

     

       


        {{item.title}}

      


     

     `,

  styles: [

    `

      .masonry-item { width: 200px; }

    `

  ]

})

class MyComponent {

  masonryItems = [

    { title: 'item 1' },

    { title: 'item 2' },

    { title: 'item 3' },

  ];

}

```



## Configuration



### Ordered



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



```



### Options



Read about Masonry options here: [Masonry Options](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;

* 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



```



### updateLayout



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.



### animations



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;

}

```



### Image Lazyload

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



### layoutComplete: `EventEmitter`



Triggered after a layout and all positioning transitions have completed.



> [http://masonry.desandro.com/events.html#layoutcomplete](http://masonry.desandro.com/events.html#layoutcomplete)



### removeComplete: `EventEmitter`



Triggered after an item element has been removed.



> [http://masonry.desandro.com/events.html#removecomplete](http://masonry.desandro.com/events.html#removecomplete)



### itemsLoaded: `EventEmitter`



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



### Examples



```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

    


    ```



  * If item is inserted or the list is shuffled, use `reloadItems()`



    ```typescript

    // 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:



  https://github.com/wynfred/ngx-masonry/issues/8



* How to setup if I use SystemJS?



  If you're using SystemJS add `ngx-masonry` and `masonry-layout` to your configuration:



  ```json

  packages: {

    "ngx-masonry": { "defaultExtension": "js", "main": "index" }

  },

  map: {

    "ngx-masonry": "node_modules/ngx-masonry",

    "masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js"

  }

  ```



* Where is imagesLoaded?



  imagesLoaded is removed in V9. masonry item will support image by default



## Demo



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](https://github.com/wynfred/ngx-masonry-demo) to view an app that uses it as an npm package.



[View a live demo here](https://ngx-masonry-demo.herokuapp.com/)