npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lucasolivamorim/ng-masonry-grid

v1.2.6

Published

Angular 2+ masonry grid component with CSS3 animations on scroll.

Downloads

52

Readme

ng-masonry-grid

Angular 2+ masonry grid component with CSS animations on scroll.

npm version Dependency Status

Demo: https://ng-masonry-grid.stackblitz.io/

Installation

First install Peer dependencies

$ npm install masonry-layout imagesloaded --save

To install ng-masonry-grid library, run:

$ npm install ng-masonry-grid --save

Consuming NgMasonryGridModule

You can import NgMasonryGridModule Module in any Angular application AppModule as shown below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import NgMasonryGridModule
import { NgMasonryGridModule } from 'ng-masonry-grid';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify NgMasonryGrid library as an import
    NgMasonryGridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example usage

Once NgMasonryGridModule Module is imported, you can use its components and directives in your Angular application:

// In your Angular Component
@Component({
  selector: 'app-root',
  template: `
    <!-- You can now use ng-masonry-grid component in app.component.html -->
    <!-- Masonry grid Container -->
    <ng-masonry-grid
                    [masonryOptions]="{ transitionDuration: '0.8s', gutter: 5 }" 
                    [useAnimation]="true"
                    [useImagesLoaded]="true"
                    [scrollAnimationOptions]="{ animationEffect: 'effect-4', minDuration : 0.4, maxDuration : 0.7 }">
      <!-- Masonry Grid Item -->
      <ng-masonry-grid-item id="{{'masonry-item-'+i}}" *ngFor="let item of masonryItems; let i = index;" (click)="removeItem($event)"> 
        <!-- Grid Content  -->
        <img src="some_image.jpg" alt="No image" />
      </ng-masonry-grid-item>
    </ng-masonry-grid>
  `,
  styleUrls: ['Path_to/node_modules/ng-masonry-grid/ng-masonry-grid.css'] // point to ng-masonry-grid CSS file (required)
})

Note: 'id' on ng-masonry-grid-item is required for removeItem, removeAllItems functionality

Ng Masonry Grid Options

scrollAnimationOptions = {
  /* animation effect class will added on ng-masonry-grid-item on scroll, you can choose animation effect class from the predefined list: 
     ["effect-1","effect-2","effect-3","effect-4","effect-5","effect-6","effect-7","effect-8"] or else you can add your own custom class as you wish */
  animationEffect: 'effect-1', // String: (default: 'effect-1')
  // Integer: Minimum and a maximum duration of the animation 
  minDuration : 0,
  maxDuration : 0,
  // The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
  // if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport.
  // If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
  viewportFactor : 0
}

// or

useAnimation = true;  // true/false  default: true,  default animation options will be applied if you do not provide scrollAnimationOptions

masonryOptions = {
   addStatus: 'append', // default: 'append', values from: ['append', 'prepend', 'add'], set status of adding grid items to Masonry
   transitionDuration: '0.4s', // Duration of the transition when items change position or appearance, set in a CSS time format. Default: transitionDuration: '0.4s'
   ...
   // More masonry options available in (http://masonry.desandro.com/options.html)
} 

// Unloaded images can throw off Masonry layouts and cause item elements to overlap. imagesLoaded plugin resolves this issue. 

useImagesLoaded = "true"; // default: false, use true incase if of any images to be loaded in grid items

More masonry options available in Masonry options by David DeSandro

Masonry Events

layoutComplete: EventEmitter<any[]>

Triggered after a layout and all positioning transitions have completed.

removeComplete: EventEmitter<any[]>

Triggered after an ng-masonry-grid-item element has been removed.

onNgMasonryInit: EventEmitter<Masonry>

Get an instance of Masonry after intialization, so that you can use all Masonry Methods such as layout(), reloadItems() etc.

Example

<ng-masonry-grid
    (onNgMasonryInit)="onNgMasonryInit($event)"
    (layoutComplete)="layoutComplete($event)" 
    (removeComplete)="removeGridItem($event)">
    <ng-masonry-grid-item 
        id="{{'masonry-item-'+i}}" 
        *ngFor="let item of masonryItems; let i = index;" 
        (click)="removeItem($event)">
    </ng-masonry-grid-item>
</ng-masonry-grid>

Ng Masonry Grid Methods

import { Masonry, MasonryGridItem } from 'ng-masonry-grid'; // import necessary datatypes

_masonry: Masonry;
masonryItems: any[]; // NgMasonryGrid Grid item list

// Get ng masonry grid instance first
onNgMasonryInit($event: Masonry) {
  this._masonry = $event;
}

// Append items to NgMasonryGrid
appendItems() {
  if (this._masonry) { // Check if Masonry instance exists
    this._masonry.setAddStatus('append'); // set status to 'append'
    this.masonryItems.push(...items); // some grid items: items
  }
}

// Prepend grid items to NgMasonryGrid
prependItems() {
  if (this._masonry) {
    // set status to 'prepend' before adding items to NgMasonryGrid otherwise default: 'append' will applied
    this._masonry.setAddStatus('prepend');
    this.masonryItems.splice(0, 0, ...items);
  }
}

// Add items to NgMasonryGrid
addItems() {  
  if (this._masonry) {
    this._masonry.setAddStatus('add'); // set status to 'add'
    this.masonryItems.push(...items);
  }
}

// Remove selected item from NgMasonryGrid, For example, (click)="removeItem($event)" event binding on grid item
// Note: 'id' on ng-masonry-grid is required to remove actual item from the list
removeItem($event: any) {
  if (this._masonry) {
    this._masonry.removeItem($event.currentTarget)  // removeItem() expects actual DOM (ng-masonry-grid-item element)
        .subscribe((item: MasonryGridItem) => { // item: removed grid item DOM from NgMasonryGrid
          if (item) {
            let id = item.element.getAttribute('id'); // Get id attribute and then find index 
            let index = id.split('-')[2];
            // remove grid item from Masonry binding using index (because actual Masonry items order is different from this.masonryItems items) 
            this.masonryItems.splice(index, 1); 
          }
        });
  }
}

// Remove first item from NgMasonryGrid
removeFirstItem() {
  if (this._masonry) {
    this._masonry.removeFirstItem()
        .subscribe( (item: MasonryGridItem) => {
          if (item) {
            let id = item.element.getAttribute('id');
            let index = id.split('-')[2];
            this.masonryItems.splice(index, 1);
          }
        });
  }
}

// Remove all items from NgMasonryGrid
removeAllItems() {
  if (this._masonry) {
    this._masonry.removeAllItems()
        .subscribe( (items: MasonryGridItem) => {
            // remove all items from the list
            this.masonryItems = [];
        });
  }
}

// reorder items to original position
// Note: Add masonry option:- horizontalOrder: true
reorderItems() {
  if (this._masonry) {
      this._masonry.reOrderItems();
  }
}

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To run demo...

  1. From the ng-masonry-grid/dist directory, create a symlink in the global node_modules directory to the dist directory of ng-masonry-grid:
$ cd dist
$ npm link
  1. Navigate to ng-masonry-grid/playground directory:
$ cd playground
$ npm link ng-masonry-grid
  1. Now run the demo (from ng-masonry-grid) directory:
$ npm run demo

Credits

This Angular 2+ Component is created based on Masonry Layout by David DeSandro

License

MIT © Shailendra Kumar