{"_id":"@abdenourlatrache/ngx-masonry","name":"@abdenourlatrache/ngx-masonry","dist-tags":{"latest":"19.0.0"},"versions":{"19.0.0":{"name":"@abdenourlatrache/ngx-masonry","version":"19.0.0","description":"Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry","keywords":["angular","angular 19","masonry","masonry layout","masonry feed","desandro","masonry","ngx"],"homepage":"https://github.com/wynfred/ngx-masonry/","bugs":{"url":"https://github.com/wynfred/ngx-masonry/issues"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/wynfred/ngx-masonry.git"},"peerDependencies":{"@angular/animations":"^19.2.5","@angular/common":"^19.2.5","@angular/core":"^19.2.5","masonry-layout":"^4.2.2","rxjs":"~7.8.2","zone.js":"~0.15.0"},"dependencies":{"tslib":"^2.8.1"},"module":"fesm2022/abdenourlatrache-ngx-masonry.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/abdenourlatrache-ngx-masonry.mjs"}},"sideEffects":false,"_id":"@abdenourlatrache/ngx-masonry@19.0.0","_nodeVersion":"24.10.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-PVN9RlQL/HzcH3aMcb0TSvRdu59/Z7FrW1wzFS3lcmnsKsf9v4ezAah0TStQkWB5RWCCCCxJHrO2/AR+u+BXvg==","shasum":"c626ad6c76c0e45840df2e429f15b2ed8292c472","tarball":"https://registry.npmjs.org/@abdenourlatrache/ngx-masonry/-/ngx-masonry-19.0.0.tgz","fileCount":11,"unpackedSize":37367,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG4P84U649R0qJys6O1VZpoeM47bDfPFboPK4QGTpN5GAiAlPtOQHSzaQyfcdYR7aat/mdztdtiRgej+vg9C+0xshA=="}]},"_npmUser":{"name":"abdenourlatrache","email":"a.latrache@esi-sba.dz"},"directories":{},"maintainers":[{"name":"abdenourlatrache","email":"a.latrache@esi-sba.dz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-masonry_19.0.0_1768681393051_0.3723976493620722"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-17T20:23:12.952Z","19.0.0":"2026-01-17T20:23:13.193Z","modified":"2026-01-17T20:23:13.393Z"},"maintainers":[{"name":"abdenourlatrache","email":"a.latrache@esi-sba.dz"}],"description":"Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry","homepage":"https://github.com/wynfred/ngx-masonry/","keywords":["angular","angular 19","masonry","masonry layout","masonry feed","desandro","masonry","ngx"],"repository":{"type":"git","url":"git+https://github.com/wynfred/ngx-masonry.git"},"bugs":{"url":"https://github.com/wynfred/ngx-masonry/issues"},"license":"MIT","readme":"# Angular Module for displaying a feed of items in a masonry layout using [https://github.com/desandro/masonry](https://github.com/desandro/masonry)\n\nThis 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.\n\nThis updated version is also compatible with Angular Universal server side rendering (SSR)\n\n[![npm version](https://badge.fury.io/js/ngx-masonry.svg)](https://www.npmjs.com/package/ngx-masonry)\n\n## Installation\n\n`npm install ngx-masonry masonry-layout --save`\n\n## Usage\n\nImport `NgxMasonryModule` into your app's modules:\n\n```typescript\nimport { NgxMasonryModule } from 'ngx-masonry';\n\n@NgModule({\n  imports: [NgxMasonryModule]\n})\n```\n\n```typescript\n@Component({\n  selector: 'my-component',\n  template: `\n     <ngx-masonry>\n       <div ngxMasonryItem class=\"masonry-item\" *ngFor=\"let item of masonryItems\">\n        {{item.title}}\n      </div>\n     </ngx-masonry>\n     `,\n  styles: [\n    `\n      .masonry-item { width: 200px; }\n    `\n  ]\n})\nclass MyComponent {\n  masonryItems = [\n    { title: 'item 1' },\n    { title: 'item 2' },\n    { title: 'item 3' },\n  ];\n}\n```\n\n## Configuration\n\n### Ordered\n\nAppend new items synchronously. The order of the items will be preserved, but one image in the middle will block the reset of the images.\n\n```typescript\n<ngx-masonry [options]=\"masonryOptions\" [ordered]=\"true\">\n```\n\n### Options\n\nRead about Masonry options here: [Masonry Options](http://masonry.desandro.com/options.html)\n\nThe `options`-attribute takes an object with the following properties:\n\n* itemSelector: string;\n* columnWidth: number | string;\n* gutter: number;\n* percentPosition: boolean;\n* stamp: string;\n* fitWidth: boolean;\n* originLeft: boolean;\n* originTop: boolean;\n* containerStyle: string;\n* resize: boolean;\n* initLayout: boolean;\n* horizontalOrder: boolean;\n* animations: NgxMasonryAnimations;\n\n#### Examples\n\nInline object:\n\n```html\n<ngx-masonry [options]=\"{ gutter: 10 }\"></ngx-masonry>\n```\n\nFrom parent component:\n\n```typescript\nimport { NgxMasonryOptions } from 'ngx-masonry';\n\npublic myOptions: MasonryOptions = {\n  gutter: 10\n};\n```\n\n```html\n<ngx-masonry [options]=\"myOptions\"></ngx-masonry>\n```\n\n### updateLayout\n\nngx-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.\n\n```html\n<ngx-masonry [updateLayout]=\"updateMasonryLayout\"></ngx-masonry>\n```\n\nWhen `updateMasonryLayout` is updated, the `layout()` method will be called.\n\n### animations\n\nYou can create and set customized animations with this option.\n\n```typescript\n  animations = {\n    show: [\n      style({opacity: 0}),\n      animate('400ms ease-in', style({opacity: 1})),\n    ],\n    hide: [\n      style({opacity: '*'}),\n      animate('400ms ease-in', style({opacity: 0})),\n    ]\n  }\n\n  // To disable animation\n  animations = {}\n```\n\nNote 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.\n\n```css\n.masonry-item {\n  transition: top 0.4s ease-in-out, left 0.4s ease-in-out;\n}\n```\n\n### Image Lazyload\nWhen using any lazyload methods layout, you can add `masonryLazy` attribute to the images.\n\nNote: 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.\n\nExample:\n```html\n  <img masonryLazy loading=\"lazy\" width=\"500px\" height=\"300px\"/>\n```\n\n## Events\n\n### layoutComplete: `EventEmitter<any[]>`\n\nTriggered after a layout and all positioning transitions have completed.\n\n> [http://masonry.desandro.com/events.html#layoutcomplete](http://masonry.desandro.com/events.html#layoutcomplete)\n\n### removeComplete: `EventEmitter<any[]>`\n\nTriggered after an item element has been removed.\n\n> [http://masonry.desandro.com/events.html#removecomplete](http://masonry.desandro.com/events.html#removecomplete)\n\n### itemsLoaded: `EventEmitter<number>`\n\nShould only be used with `ordered` mode. Triggered after the last item is loaded.\n\n### Examples\n\n```html\n<ngx-masonry (layoutComplete)=\"doStuff($event)\" (removeComplete)=\"doOtherStuff($event)\"></ngx-masonry>\n```\n\n## FAQ\n\n* How to maintain the order of items if there are images?\n\n  * Set `[ordered]` to true.\n  * To insert item at the beginning: prepend the item to the array **and** set `prepend` to true.\n\n    ```typescript\n    <div ngxMasonryItem [prepend]=\"image.prepend\" *ngFor=\"let image of masonryImages\">\n    ```\n\n  * If item is inserted or the list is shuffled, use `reloadItems()`\n\n    ```typescript\n    // get reference\n    @ViewChild(NgxMasonryComponent) masonry: NgxMasonryComponent;\n\n    // after the order of items has changed\n    this.masonry.reloadItems();\n    this.masonry.layout();\n    ```\n\n* Why is the transitionDuration option not supported?\n\n  The builtin animation of masonry-layout doesn't work with angular well.\n\n  For more information refer to this issue:\n\n  https://github.com/wynfred/ngx-masonry/issues/8\n\n* How to setup if I use SystemJS?\n\n  If you're using SystemJS add `ngx-masonry` and `masonry-layout` to your configuration:\n\n  ```json\n  packages: {\n    \"ngx-masonry\": { \"defaultExtension\": \"js\", \"main\": \"index\" }\n  },\n  map: {\n    \"ngx-masonry\": \"node_modules/ngx-masonry\",\n    \"masonry-layout\": \"node_modules/masonry-layout/dist/masonry.pkgd.js\"\n  }\n  ```\n\n* Where is imagesLoaded?\n\n  imagesLoaded is removed in V9. masonry item will support image by default\n\n## Demo\n\nThis 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.\n\n[View a live demo here](https://ngx-masonry-demo.herokuapp.com/)\n","readmeFilename":"README.md","_rev":"1-2441d0eff0425e2338e70dc81daadc52"}