ng-masonry-grid
Angular 6+ masonry grid component with CSS animations on scroll.
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 NgMasonryGridModule;
Example usage
Once NgMasonryGridModule Module is imported, you can use its components and directives in your Angular application:
// In your Angular Component
Note: 'id' on ng-masonry-grid-item is required for removeItem, removeAllItems functionality
Ng Masonry Grid Options
scrollAnimationOptions = // or useAnimation = true; // true/false default: true, default animation options will be applied if you do not provide scrollAnimationOptions masonryOptions = // 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
EventEmitter<any[]>
layoutComplete: Triggered after a layout and all positioning transitions have completed.
EventEmitter<any[]>
removeComplete: Triggered after an ng-masonry-grid-item element has been removed.
EventEmitter<Masonry>
onNgMasonryInit: Get an instance of Masonry after intialization, so that you can use all Masonry Methods such as layout(), reloadItems() etc.
Example
Ng Masonry Grid Methods
; // import necessary datatypes _masonry: Masonry;masonryItems: any; // NgMasonryGrid Grid item list // Get ng masonry grid instance firstonNgMasonryInit$event: Masonry // Append items to NgMasonryGridappendItems // Prepend grid items to NgMasonryGridprependItems // Add items to NgMasonryGridaddItems // 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 listremoveItem$event: any // Remove first item from NgMasonryGridremoveFirstItem // Remove all items from NgMasonryGridremoveAllItems // reorder items to original position// Note: Add masonry option:- horizontalOrder: truereorderItems
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To run demo...
- 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
- Navigate to ng-masonry-grid/playground directory:
$ cd playground$ npm link ng-masonry-grid
- Now run the demo (from ng-masonry-grid) directory:
$ npm run demo
Credits
This ng-masonry-grid component is created based on Masonry Layout by David DeSandro
License
MIT © Shailendra Kumar