Neurological Phenomenon Multiplexer

    ngx-masonry
    TypeScript icon, indicating that this package has built-in type declarations

    13.0.0 • Public • Published

    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)

    npm version

    Installation

    npm install ngx-masonry masonry-layout --save

    Usage

    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' },
      ];
    }

    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.

    <ngx-masonry [options]="masonryOptions" [ordered]="true">

    Options

    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;

    Examples

    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>

    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.

    <ngx-masonry [updateLayout]="updateMasonryLayout"></ngx-masonry>

    When updateMasonryLayout is updated, the layout() method will be called.

    animations

    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 = {}

    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.

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

      <img masonryLazy loading="lazy" width="500px" height="300px"/>

    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

    itemsLoaded: EventEmitter<number>

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

    Examples

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

    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.

        <div ngxMasonryItem [prepend]="image.prepend" *ngFor="let image of masonryImages">
      • If item is inserted or the list is shuffled, 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:

      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:

      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 to view an app that uses it as an npm package.

    View a live demo here

    Install

    npm i ngx-masonry

    DownloadsWeekly Downloads

    12,731

    Version

    13.0.0

    License

    MIT

    Unpacked Size

    136 kB

    Total Files

    20

    Last publish

    Collaborators

    • wynfred