{"id":13497078,"url":"https://github.com/wynfred/ngx-masonry","last_synced_at":"2025-03-28T21:32:01.680Z","repository":{"id":45793373,"uuid":"133501072","full_name":"wynfred/ngx-masonry","owner":"wynfred","description":"Angular Module for displaying a feed of items in a masonry layout","archived":false,"fork":false,"pushed_at":"2022-10-28T06:39:31.000Z","size":34,"stargazers_count":153,"open_issues_count":6,"forks_count":52,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-19T01:04:08.906Z","etag":null,"topics":["angular","angular5","angular6","angular9","masonry","masonry-grid","masonry-layout","ngx","ngx-masonry"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wynfred.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-15T10:38:54.000Z","updated_at":"2024-05-19T01:04:08.907Z","dependencies_parsed_at":"2023-01-20T16:47:28.965Z","dependency_job_id":null,"html_url":"https://github.com/wynfred/ngx-masonry","commit_stats":null,"previous_names":["gethinoakes/ngx-masonry"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wynfred%2Fngx-masonry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wynfred%2Fngx-masonry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wynfred%2Fngx-masonry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wynfred%2Fngx-masonry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wynfred","download_url":"https://codeload.github.com/wynfred/ngx-masonry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245823298,"owners_count":20678172,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular5","angular6","angular9","masonry","masonry-grid","masonry-layout","ngx","ngx-masonry"],"created_at":"2024-07-31T20:00:22.826Z","updated_at":"2025-03-28T21:32:01.437Z","avatar_url":"https://github.com/wynfred.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"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     \u003cngx-masonry\u003e\n       \u003cdiv ngxMasonryItem class=\"masonry-item\" *ngFor=\"let item of masonryItems\"\u003e\n        {{item.title}}\n      \u003c/div\u003e\n     \u003c/ngx-masonry\u003e\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\u003cngx-masonry [options]=\"masonryOptions\" [ordered]=\"true\"\u003e\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\u003cngx-masonry [options]=\"{ gutter: 10 }\"\u003e\u003c/ngx-masonry\u003e\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\u003cngx-masonry [options]=\"myOptions\"\u003e\u003c/ngx-masonry\u003e\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\u003cngx-masonry [updateLayout]=\"updateMasonryLayout\"\u003e\u003c/ngx-masonry\u003e\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  \u003cimg masonryLazy loading=\"lazy\" width=\"500px\" height=\"300px\"/\u003e\n```\n\n## Events\n\n### layoutComplete: `EventEmitter\u003cany[]\u003e`\n\nTriggered after a layout and all positioning transitions have completed.\n\n\u003e [http://masonry.desandro.com/events.html#layoutcomplete](http://masonry.desandro.com/events.html#layoutcomplete)\n\n### removeComplete: `EventEmitter\u003cany[]\u003e`\n\nTriggered after an item element has been removed.\n\n\u003e [http://masonry.desandro.com/events.html#removecomplete](http://masonry.desandro.com/events.html#removecomplete)\n\n### itemsLoaded: `EventEmitter\u003cnumber\u003e`\n\nShould only be used with `ordered` mode. Triggered after the last item is loaded.\n\n### Examples\n\n```html\n\u003cngx-masonry (layoutComplete)=\"doStuff($event)\" (removeComplete)=\"doOtherStuff($event)\"\u003e\u003c/ngx-masonry\u003e\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    \u003cdiv ngxMasonryItem [prepend]=\"image.prepend\" *ngFor=\"let image of masonryImages\"\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwynfred%2Fngx-masonry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwynfred%2Fngx-masonry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwynfred%2Fngx-masonry/lists"}