wynfred/ngx-masonry

Angular Module for displaying a feed of items in a masonry layout

ngx-masonry's Issues

FIX ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at NgxMasonryComponent.push../node_modules/ngx-masonry/fesm5/ngx-masonry.js.NgxMasonryComponent.add

You try to delete an element from the DOM tree, if the Dom tree does not have this element, the code falls into an error, this problem is manifested if we use the parameter [useImagesLoaded]= " true";

fesm2015 => ngx-masonry.js:
if (this.useImagesLoaded) { imagesLoaded(element, function (instance) { _this._element.nativeElement.appendChild(element); // Tell Masonry that a child element has been added _this._msnry.appended(element); // layout if first item if (isFirstItem) { _this.layout(); } }); safe(() => this._element.nativeElement.removeChild(element)); }
change to:
if (this.useImagesLoaded) { imagesLoaded(element, function (instance) { _this._element.nativeElement.appendChild(element); // Tell Masonry that a child element has been added _this._msnry.appended(element); // layout if first item if (isFirstItem) { _this.layout(); } }); safe(() => this._element.nativeElement.removeChild(element)); }

line this._element.nativeElement.removeChild(element); => safe(() => this._element.nativeElement.removeChild(element));

`
/**

• A small dirty hack that safely implements the passed fn function.<br / >
• Serves to get a property with a long chain method, where some part of the chain may be undefined.
• @example
• if (safe (() = > this.foo[0].bar.isUseful)) { ...
• // returns 'this.foo[0].bar.isUseful' or undefined, avoiding creating exceptions.
• @param fn - some simple functions, preferably lambda.
• @returns {T | undefined}

*/
export function safe(fn: () => T): T | undefined {
try {
return fn();
} catch {
return undefined;
}
}
you can takesafe methodwith my npm packegenpm install angular2-utilitesoryarn add angular2-utilites`

Grid doesn't always stay at top of page

Hey there,

I'm having some issues with the grid not staying at top of page. It's pretty random really and I'm not sure what settings I need to fix it. I've attached some screenshots for examples. I'm basically trying to get the pictures lined up with a 5px space between the toolbar and first row of pictures.

Every once in awhile, it stays at the top... but most of the time not so much.

Here is the repo for my project. You'll need a Giphy API key to get the grid working.

css binding (gutter)

Hi, I'm trying to use ngx-masonry in an application for different screen sizes and therefore I need to scale the items and especially the gutter in relation to the screen size. The items are pretty easy, I use a media query to change the size and I'm done.
The problem is that the gutter expects a number but I would like to bind it to a CSS property to use it with the already created media queries. The original masonry library provides such a functionality: https://masonry.desandro.com/options.html#gutter

Can you think of any workaround for me or even implement this feature?

Can't be part of an Angular 9 SSR deployment because of 'window' access in masonry.js

It seems that this can't be part of an angular 9 SSR deployment because isPlatformBrowser is not being checked on calls to masonry.js.

This was not a problem in Angular 8 but something in Angular 9 seems to have caused this problem with external references to 'window'.

Note that even if in my local project I wrap all references in isPlatformBrowser checks, the incompatible modules are still loaded and this results in the following error:

>[email protected] servedev:ssr /Users/me/Development/front
> NODE_ENV=dev node dist/server/main

/Users/me/Development/front/dist/server/main.js:200603
}( window, function factory( Outlayer, getSize ) {
   ^

ReferenceError: window is not defined
    at Object../node_modules/masonry-layout/masonry.js (/Users/me/Development/front/dist/server/main.js:200603:4)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Module../node_modules/ngx-masonry/__ivy_ngcc__/fesm2015/ngx-masonry.js (/Users/me/Development/front/dist/server/main.js:225304:72)

Error: Metadata version mismatch for module .../ngx-masonry/ngx-masonry.d.ts, found version 4, expected 3

Specification:
Angular 4
ngx-masonry 1.1.4

How remove the animation??

Cannot find module 'ngx-masonry'

Code: import { NgxMasonryComponent, NgxMasonryOptions } from "ngx-masonry";

This began occurring on 1.1.3. If we change to 1.1.2, the issue goes away. The package may just need to be re-published with code in master, as 1.1.2 was never committed and 1.1.3 contains lots of changes that were not committed.

ngFor + a static element creates a gap in the grid

First, thank you for this amazing lib!
I'm having an issue with the following code snippet:

<ngx-masonry [options]="{ gutter: 15 }">
    <div ngxMasonryItem class="document masonry-item" *ngFor="let number of [0,1,2,3,4]">
        <div class="content">
            <div class="icon">
                <div class="triangle-topright"></div>
                <mat-icon>mic</mat-icon>
            </div>
        </div>
        <div class="label">Record {{number}}</div>
    </div>
    <div ngxMasonryItem class="document new masonry-item" (click)="recordReport">
        <div class="content">
            <div class="icon">
                <div class="triangle-topright"></div>
                <mat-icon>add</mat-icon>
            </div>
        </div>
        <div class="label">Upload a record</div>
    </div>
</ngx-masonry>

the combination of ngFor and a static element seems to create a gap in the grid:

this is not the case without the static element:

Is it possible to use ngx-masonry this way? Otherwise, do you know a workaround?

Thanks!

Need help with showing items in a responsive manner

Hi Wynfred

I checked the demo repository for this https://ngx-masonry-demo.herokuapp.com/

But when I cloned and ran this repo, the end result is not responsive. Unlike the live demo website, it doesn't add or reduce columns as per the width.

Can you please help ? I need an code example for showing items in responsive way.

ERROR in ./node_modules/ngx-masonry/fesm5/ngx-masonry.js Module build failed when ng serve --prod

ERROR in ./node_modules/ngx-masonry/fesm5/ngx-masonry.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/bui
ld-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (D:\Projects\myproject\node_modul
es@angular-devkit\build-optimizer\src\transforms\scrub-file.js:242:35)
at checkNodeForDecorators (D:\Projects\myproject\node_modules@angular-de
vkit\build-optimizer\src\transforms\scrub-file.js:67:21)
at visitNodes (D:\Projects\myproject\node_modules\typescript\lib\typescri
pt.js:14809:30)
at Object.forEachChild (D:\Projects\myproject\node_modules\typescript\lib
\typescript.js:15033:24)
at checkNodeForDecorators (D:\Projects\myproject\node_modules@angular-de
vkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (D:\Projects\myproject\node_modules\typescript\lib\typescrip
t.js:14800:24)
at Object.forEachChild (D:\Projects\myproject\node_modules\typescript\lib
\typescript.js:14928:21)
at checkNodeForDecorators (D:\Projects\myproject\node_modules@angular-de
vkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (D:\Projects\myproject\node_modules\typescript\lib\typescrip
t.js:14800:24)
at Object.forEachChild (D:\Projects\myproject\node_modules\typescript\lib
\typescript.js:14985:24)
at checkNodeForDecorators (D:\Projects\myproject\node_modules@angular-de
vkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (D:\Projects\orderworkNew\node_modules\typescript\lib\typescrip
t.js:14800:24)
at Object.forEachChild (D:\Projects\myproject\node_modules\typescript\lib
\typescript.js:14996:24)
at checkNodeForDecorators (D:\Projects\myproject\node_modules@angular-de
vkit\build-optimizer\src\transforms\scrub-file.js:58:31)
at visitNode (D:\Projects\myproject\node_modules\typescript\lib\typescrip
t.js:14800:24)
at Object.forEachChild (D:\Projects\myproject\node_modules\typescript\lib
\typescript.js:14893:21)

Is there a way to force sort?

When I reload the same page, the order changes.

It may be affected if a particular image is later loaded.

Is there a way to sort in array order?

Angular Animations and ngx-masonry

Hello.
I'm using some animations from Angular's platform-browser/animations package.

The problem is that ngx-masonry removes an element from DOM on ngOnDestroy hook by default.
Reasons for that are obvious of course.

But in that case i can't use any animations on leave because Angular removes HTMLElements after animation's (*.done) hook and that makes a strange effect when masonry grid is disappearing directly five seconds before than the main component does.

Also here is no any option in the config to prevent destroying right after ngOnDestroy.

I mean:

ngx-masonry/src/lib/ngx-masonry.directive.ts

Lines 60 to 65 in 9c616d8

	ngOnDestroy() {
	if (this.images && this.images.size === 0 && this.element.nativeElement.parentNode) {
	this.playAnimation(false);
	this.parent.remove(this.element.nativeElement);
	}
	}

Pushing a new object in the array does not rerender the masonry

When I try to post an API request and get the response and push that object into the array. The masonry will not update even if I do a content resize on the viewChild.

Angular universal - TypeError: object is not iterable

Hi,
I'm running ngx-masonry on my SSR app. I've got error:

ERROR TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
    at new Set (<anonymous>)
    at NgxMasonryDirective.ngAfterViewInit

Error is showing because there is no images inside ngx-masonry component. I looked at source code of NgxMasonryDirective - ngAfterViewInit method and there is something like

const images = this.element.nativeElement.getElementsByTagName('img');
this.images = new Set(images);

It works good in browser, but at my universal app (node) there is error because of that part of code. I think node interprets differently getElementsByTagName method than browser...
When I set ngIf at ngx-masonry component like <ngx-masonry *ngIf="elements.length > 0" [options]="myOptions"> the problem persists, but I don't know why...

Could You help me? :)

Regards,
Wojciech

strange behaviors of masonry grid

Hello!

I would like to report some strange behaviors of masonry grid. Also I would contribute on the library if you are okay with this.

• Sometimes grid gets lost its column count to 1 and never get recovered until I refresh the page
  https://drive.google.com/open?id=15m5UkzDATY_GLsPpZ0_Zw8IYOEc-ZD-4
• Sometimes items are overlapped. They are not being displayed. It only happens on the first column
  https://drive.google.com/file/d/1umLm6pacTwylzr2GWomrHH6zdTkl0LBo/view

Here goes my implementation

<ngx-masonry class="my-50" [options]="{gutter: gutter}" (layoutComplete)="layoutCompleted($event)">
  <div ngxMasonryItem class="masonry-item" *ngFor="let idea of ideas"
    [style.width]="cardWidth"
    [style.margin-bottom.px]="gutter">
    <job-hub-idea-board-card [editable]="editable"
                             [selectable]="selectable"
                             [clickable]="clickable"
                             [idea]="idea"
                             [isCustomer]="isCustomer"
                             (view)="view($event)"
                             (edit)="edit.emit($event)"
                             (delete)="delete.emit($event)"></job-hub-idea-board-card>
  </div>
</ngx-masonry>
<p class="d-flex align-items-center justify-content-center text-primary" *ngIf="hasPending">Loading
  {{ ideas.length > loaded ? ideas.length - loaded : loaded - ideas.length }} more images...
  <span class="d-inline-block ml-10 px-10 py-10 position-relative"><job-hub-spinner diameter="20"></job-hub-spinner></span>
</p>

export class IdeaBoardComponent implements OnInit {

  @Input() ideas: Idea[] = [];
  @Input() gutter = 20;
  @Input() col = 4;
  @ViewChild(NgxMasonryComponent) masonry: NgxMasonryComponent;

  loaded = 0;
  cardWidth;

  get hasPending(): boolean {
    return this.ideas.length > 0 && Boolean(this.loaded < this.ideas.length);
  }

  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    this.cardWidth = this.sanitizer.bypassSecurityTrustStyle(`calc((100% - ${(this.col - 1) * this.gutter}px) / ${this.col}`);
  }

  layoutCompleted(e) {
    if (this.loaded > this.ideas.length) {
      this.loaded = this.ideas.length;
      return;
    }
    if (e && e.length === 1) {
      this.loaded++;
    }
  }

  reset() {
    this.masonry.reloadItems();
  }
}

bug: sometimes grid column goes into one

Hello!

Sorry again, I am opening this issue again, that 1 grid issue getting more buggy. We are seeing this problem so frequently, I would like to know source of this problem and I hope to help you to figure out this together.

• Sometimes grid gets lost its column count to 1 and never get recovered until I refresh the page
  https://drive.google.com/open?id=15m5UkzDATY_GLsPpZ0_Zw8IYOEc-ZD-4

Here goes my implementation

<ngx-masonry class="my-50" [options]="{gutter: gutter}" (layoutComplete)="layoutCompleted($event)">
  <div ngxMasonryItem class="masonry-item" *ngFor="let idea of ideas"
    [style.width]="cardWidth"
    [style.margin-bottom.px]="gutter">
    <job-hub-idea-board-card [editable]="editable"
                             [selectable]="selectable"
                             [clickable]="clickable"
                             [idea]="idea"
                             [isCustomer]="isCustomer"
                             (view)="view($event)"
                             (edit)="edit.emit($event)"
                             (delete)="delete.emit($event)"></job-hub-idea-board-card>
  </div>
</ngx-masonry>
<p class="d-flex align-items-center justify-content-center text-primary" *ngIf="hasPending">Loading
  {{ ideas.length > loaded ? ideas.length - loaded : loaded - ideas.length }} more images...
  <span class="d-inline-block ml-10 px-10 py-10 position-relative"><job-hub-spinner diameter="20"></job-hub-spinner></span>
</p>

export class IdeaBoardComponent implements OnInit {

  @Input() ideas: Idea[] = [];
  @Input() gutter = 20;
  @Input() col = 4;
  @ViewChild(NgxMasonryComponent) masonry: NgxMasonryComponent;

  loaded = 0;
  cardWidth;

  get hasPending(): boolean {
    return this.ideas.length > 0 && Boolean(this.loaded < this.ideas.length);
  }

  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    this.cardWidth = this.sanitizer.bypassSecurityTrustStyle(`calc((100% - ${(this.col - 1) * this.gutter}px) / ${this.col}`);
  }

  layoutCompleted(e) {
    if (this.loaded > this.ideas.length) {
      this.loaded = this.ideas.length;
      return;
    }
    if (e && e.length === 1) {
      this.loaded++;
    }
  }

  reset() {
    this.masonry.reloadItems();
  }
}

card updated change the order

I my situation I have two problems:

1. In my card I have a textarea, when the textarea is recized the disposition of the masonry not changing. Do we have a solution for that ?

2. And when my card get an update. Like a changement of the number of likes, the card it's directly repositioned in the masonry

Thank you if you have a way the skip the problems of cards updated

ngx-masonry is not a known element

I'm getting the following error. Can someone help me to fix this?

core.js:12632 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ngx-masonry' is not a known element:
1. If 'ngx-masonry' is an Angular component, then verify that it is part of this module.
2. If 'ngx-masonry' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Option does not update.

I want to give gutter different values depending on the screen size.

If you rotate the screen on your mobile, you can see that the option does not apply.

masonry.component.ts

@ViewChild(NgxMasonryComponent, { static: true }) masonry: NgxMasonryComponent;
public masonryOptions: NgxMasonryOptions;
public masonryOptions_small: NgxMasonryOptions = {
    gutter: 7.2
};

public masonryOptions_large: NgxMasonryOptions = {
    gutter: 20
};

.
.
.

@HostListener('window:resize', ['$event'])
  onResize(event) {
    if (innerWidth > 624) {
      this.masonry.options = this.masonryOptions_large;
      setTimeout(() => {
        this.masonry.layout();
      }, 300);
    } else {
      this.masonry.options = this.masonryOptions_small;
      setTimeout(() => {
        this.masonry.layout();
      }, 300);
    }
  }

masonry.component.html

<ngx-masonry [useImagesLoaded]="true" [options]="masonryOptions" [updateLayout]="masonryOptions" #masonry>
    <ngxMasonryItem class="masonry-item" *ngFor="let market of market_list">
      <app-market-card [market]="market">
      </app-market-card>
    </ngxMasonryItem>
</ngx-masonry>

Why doesn't [options] and [updateLayout] work?

Horizontal placement of items

Number of elements per row start decrementing by 1 and end up with one item per row. It comes back to normal layout once any element is altered (I either open that element or delete it).

Loading Gifs slowly

I am using masonry with images and it's working fine. But when I use gifs it takes too long to load each gif.

Here's my configuration:

Order of items not working

I have seen multiple closed issues adressing this problem, but none of them seems to provide a solution. Is the "horizontalOrder" option broken?

I am loading an array of image objects from my database and using it to display the images and some other information.

HTML of the component:

<ngx-masonry [options]="masonryOptions">
    <div ngxMasonryItem class="wall-item" *ngFor="let image of images">
        <app-image-wall-post [username]="image.name" [message]="image.message" [imagePath]="image.path" [timestamp]="image.timestamp"></app-image-wall-post>
    </div>
</ngx-masonry>

The app-image-wall-post component contains a material card with the image in it.

TS of the component:

export class ImageWallComponent implements OnInit {
  images: ImageEntry[];

  public masonryOptions: NgxMasonryOptions = {
    horizontalOrder: true,
    originTop: true,
    originLeft: true,
    itemSelector: '.wall-item',
  };

  constructor(private wallService: WallService, private router: Router, private eventService:EventService) { }

  ngOnInit(): void {
    this.wallService.initImageStream();

    this.wallService.images.subscribe(newImages => {
      this.images = newImages.sort((a,b) => (a.timestamp > b.timestamp) ? -1 : ((b.timestamp > a.timestamp) ? 1 : 0));

      this.images.forEach(image => {
        console.log(new Date(image.timestamp) + ", " + image.name)
      })
    });
  }
}

The sort function in the subscribe callback makes sure that the images are sorted by their upload-timestamp. When checking the console output of the images array, the sorting seems fine. However, the masonry order is somehow random. Each time I refresh the page, the order changes.

Here is also a screenshot of the console output where you can see the properly sorted array, and the images. which are not ordered properly (see the date information on the card):

Why is that, and what am I doing wrong? When I use a normal flexbox layout, the order is correct.

order of the items are not proper as the actual array items even after setup the horizontalOrder option.

item always added to end with filter

<ngxMasonryItem class="masonry-item" *ngFor="let item of items | orderBy: '-date'"> {{item}}

After initial load if a new item is added it will always show at bottom. Need to refresh for it to be ordered right. Using Angular 6.

Functionality works right without ngx-masonry

horizontalOrder not working

horizontalOrder seems to not working

Type error

Failed to execute 'removeChild' on 'Node'

为何老报这个错呢?
包括这个https://ngx-masonry-demo.herokuapp.com/ 这个线上demo也很容易报错.
报错信息:
ERROR DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
希望能解决这个bug.

Misplaced masonry items

When i try to use it I get the following problem:

It never wants to start at the beginning of the div with drawing.
The gap gets bigger with the amount of items I add.
This is how my template looks like:

And these are the options I am currently using:

I am not sure if I did something wrong or this is a problem of the package.
Would love to give extra information if needed.

blog.module.ts depends on 'ngx-masonry'. CommonJS or AMD dependencies can cause optimization bailouts

Recently upgraded to Angular 10 and getting this error messages:

blog.module.ts depends on 'ngx-masonry'. CommonJS or AMD dependencies can cause optimization bailouts

ngx-masonry.js depends on 'masonry-layout'. CommonJS or AMD dependencies can cause optimization bailouts.

My tsconfig.json

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "module": "ES2020",
    "target": "es2018",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

Error when first item is bigger width than other

I use Angular 8.

I implemented a click event on masonry-item.
When I click on an element, I want it to expand by adding a class 'opened'.
But when I click on the first element only, the others are all in columns below instead of being side by side despite the call to the method 'layout ()'.

You can look at my code on this page :
https://angular-7wyfeh.stackblitz.io for App
https://stackblitz.com/edit/angular-7wyfeh for Edit

Thank you for your help,

Angular 9 compatibility.

Hi,

I am using this package in Angular 9 project and I am getting the below error. Please let me know if the package is ready for Angular 9 Ivy.

 ERROR in node_modules/ngx-masonry/lib/ngx-masonry.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of StashModule, but could not be resolved to an NgModule class.
    
    This likely means that the library (ngx-masonry) which declares NgxMasonryModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Please let me know what can be done for Angular 9 projects.

Masonry layout in Ionic 3 causing white screen effects when scrolling up.

I have an Ionic 3 where I tried to implement this package and it worked successfully. However in my page I have a load more event on scroll function inside an so when I try to scroll down in order to load some data. The response data is added to the array the masonry still works but there are some flickering white effect on the image whenever I try to scroll up. Any thoughts on this?

Rendering twice on --prod version?

I'm having an issue with the grid items.
When running in dev env, it seems to work fine.
Also, building with --aot works fine.
But if I serve with --prod or build with --prod, the grid items are rendered twice :/

Please add a LICENSE file

Please add a LICENSE file into the git repo

Cannot read property 'kind' of undefined while ng build --prod

I am getting the following error while building my angular app for production.
Running ng serve does not produce any error

ERROR in /Users/ashok/WebRoot/sociostuff/node_modules/ngx-masonry/fesm5/ngx-masonry.js
Module build failed (from /Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
    at isAngularDecoratorMetadataExpression (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:77:21)
    at visitNodes (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16144:30)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16370:24)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16265:21)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16322:24)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16333:24)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16229:21)

Versions of packages from package.json

"@angular/animations": "~7.2.0",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/http": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/platform-server": "~7.2.0",
"@angular/router": "~7.2.0",
"ngx-masonry": "^9.1.1",

ERROR TypeError: Cannot read property 'size' of undefined when using [ordered]="true" with non image component

Hi,

I was using the [ordered]="true" option with 10.0.0 version and it was working fine in normal mode but it didn't worked in SSR mode. I had the following error:

ERROR TypeError: Cannot read property 'size' of undefined

I upgraded to 10.0.4 because I saw that you fixed a SSR bug but now it doesn't work in normal mode neither (same error).

Is the ordered option now only work with images ?

Here is how I use it:

<ngx-masonry #masonry [options]="{ gutter: 10, itemSelector: '.tile' }" [ordered]="true">
        <div *ngFor="let item of (obs$ | async)"
             class="tile"
             ngxMasonryItem>
            <app-component [data]="data"></app-component>
        </div>
</ngx-masonry>

Thanks for your job on this useful lib !
Regards

Error: No provider for AnimationBuilder

I don't see anyone encountering this issue so not sure what I've done wrong.
I'm using ngx-masonry with Ionic 5, Angular 9.1.5.
Earlier I got "missing @angular/animations" error and already install this dependency.

Thanks for the great work btw

Windows problem

npm ERR! code ETARGET
npm ERR! notarget No matching version found for ngx-masonry@^1.1.2
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'thor-early'
npm ERR! notarget

My node: 8.9.4
Win10

Mac looked fine

Any problem from other users?

Problem with dynamic filtering

I use Angular 7 and I want to dynamically filter my tiles like https://codepen.io/dan10gc/pen/GMBxaN

Have implemented in a selected class.
So I have an array of items with a title and a category.
When I click on a category, the class is added and I put the element in display: none.

Then I reload the layout with updateLayout.

In some cases, it reorganizes all of them on one column. Specifically, if the first tile present in the DOM, is not the one that corresponds to the selected category.

Exemple :

Select catégorie : All

Web	Photos	Photos
Web	Photos	Web
Apps	Photos	Photos
Apps	Web	Apps

Select catégorie : Web

Web	Web	Web
Web	Web	Web
...	...	...

Select catégorie : Photos

Photos
Photos
Photos
Photos
...

Select catégorie : Apps

Apps
Apps
Apps
Apps
...

Thank you for your help,

Transition resizing

Great job! Is it possible to put a transition back when reordering the items when resizing the screen, as in previous versions? sorry for my english translation.

feat: register from patio packages should render pending project

• User register from the patio package section
• We store some information to User object(maybe customer profile object) and return it
• UI will render very static project with patio information
• When customer click that project, modal should appear to remind scheduled consultation
• During consultation, Joe will get all information from customer
• After finishing consultation, admin user should be able to create a new project to him
• Patio flag should be deleted after the consultation or create a new project and we will show real project created by admin for UI

Facing overlapping issue between cards

The overlapping issue will be resolved if using [useImagesLoaded]="true" in div tag. next to ngxMasonryItem but card order will be change on every time page refreshes is there any way to resolve image overlapping issue without [useImagesLoaded]="true" and my card order will be not changed?

I have also updated ng-masonry to v9 and not use [useImagesLoaded]="true" but still facing overlapping issue.

--prod build animation issue

When I build for development it all works fine.

When I build for production the animation to display all of the items runs twice. The first time a slide in from the bottom and then directly after the images just to the top right and slide in from there. This happens in both chrome and safari.

<ngx-masonry #ngxMasonry [options]="masonryOptions" [updateLayout]="updateMasonryLayout">
  <mat-card ngxMasonryItem *ngFor="let swipeFile of swipeFiles" class="card-swipe-file" (click)="onSwipeFileClick(swipeFile)">
    <div *ngIf="swipeFile.imageUrl" class="linear-background" [ngStyle]="{'width': '300px', 'height': 300 * (swipeFile.imageHeight / swipeFile.imageWidth) + 'px'}" > 
      <img mat-card-image [src]="swipeFile?.imageUrl" alt="image">
    </div>
    
    <mat-card-content>
      <div class="card-title">{{swipeFile?.name}}</div>
      <div class="card-content">{{swipeFile?.description}}</div>
    </mat-card-content>
  </mat-card>
</ngx-masonry>

I am building with --source-map=false for both dev and prod otherwise I get a compilation error.

fitWidth creates one column only

Hi,

thanks for your work on this module 😃I have an issue with fitWidth. When I try using it, I only get a single column in the middle of my page. Nothing happens when I resize. When I remove "fitWidth": true I have multiple columns, but aligned left 😭Any ideas why this happens?

This is my html:

<ngx-masonry class="background-container" data-masonry='{ "itemSelector": ".grid-item", "gutter": 50, "fitWidth": true, "columnWidth": 470 }'>
    <ngxMasonryItem class="masonry-item" *ngFor="let post of posts">
        <post class="grid-item"
        ... >
        </post>
    </ngxMasonryItem>
</ngx-masonry>

This is my css:

.background-container{
    margin: 0 auto;
}
.masonry-item {
    width: 470px;
}

My post also has a container class

.container {
    width: 470px;
    border: 1px solid lightgrey;
    border-radius: 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    padding: 25px 50px;
    margin-bottom: 50px;
    background-color: white;
}

percentPosition: true

hai, When I use the option"option = {percentposition: true}" and the height and width of the picture are scaled equally, the layout of the picture in the horizontal direction is right, but the layout in the vertical direction is wrong.

[useImageLoaded]="true" swap the images position

Using [useImageLoaded]="true" swap the tiles position. How to position the tiles based on their sort order?

No longer being maintained, feel free to take it over.

As you may have seen from the lack of response to issues, this library is no longer being maintained.

I worked on it when a masonry layout was a requirement for the project I work on at my day job. We no longer use a masonry layout so dedicating my time to this isn't worth it for me. I hardly had any time to dedicate to it anyway.

So if there is someone out there who wants to transfer this repo to your name including the npm library then let me know.

Error during AOT build for older Angular version

I got an error during AOT build
ERROR in Metadata version mismatch for module /Users/olehleskiv/Documents/projects/geddit-admin-ui/node_modules/ngx-masonry/ngx-masonry.d.ts, found version 4, expected 3

I think that is because the old Angular version we use on project "^4.0.0", but we are not ready to migrate now. Do you have any suggestions to help?

How to call reloadItems() ?

I need the masonry layout to reload when I toggle a sidebar on my app. I noticed it is an available method "reloadItems()". What syntax can I use to achieve this in my component?

Update of array which is used for "ngFor" changes the order

<ng-container *ngIf="missionPostList$ | async as missionPostList">
            <ngx-masonry [options]="{ transitionDuration: '0s' }">
              <ng-container *ngFor="let missionPost of missionPostList$ | async; let i = index">
                <div ngxMasonryItem class="item">
                </div>
              </ng-container>
            </ngx-masonry>
        </ng-container>

missionPostList$ is any[].

Please image that missionPostList$ | async is
[a, b, c, d]

then, we execute some process which changes b.prop.

Of course, missionPostList$ | async will be updated as new value [a, b, c, d]

However, the order of view of <div ngxMasonryItem class="item"> is as an order of [a, c, d, b].
An element which of the property be changed go to the bottom of view.

Why?