shailu4u / ng-masonry-grid Goto Github PK

I tried to filter the item list but it's not working.
The masonry items are not visible but the space is still reserved.

Is there a way to force the masonry to be updated?

When I call reorder method all the items are back

I have an implementation with a multi-page view of images, where the user can pick an image from the gallery view to view a single image detail view, then use forward and back buttons to navigate through the array of images in detail view one at a time.

The visual sort order on each page of the masonry array differs from the source array, which leads to unpredictable behavior for the user, as they expect to see the same order as they observed on the masonry laid out page while navigating image by image, and that's not possible.

Is there a way to retrieve the sorted order of the masonry grid after it's been visually ordered such that the source array could be updated to reflect that same ordering?

I am displaying 2 different grid in my application, if we display it without timeout they get combined in single grid and if we display using set time out function it does not meet my expectations. And sometimes if you want to load both grid at same time it would be an issue. So is there any other way to get it done?

prepend items , the layout show some problem , as the image shows

Hello

I spend some hours trying to define 3 columns but i still have 5

As explained in the documentation, and on https://masonry.desandro.com/options.html I define in masonryOptions

• . itemSelector: '.grid-item' but it destroy everything
• I also use columnWidth: 400 but still the same problem.

Is it possible to define only 3 row ?

For information after the <ng-masonry-grid-item tag I don't display an img but a component (with an img inside and some information) <app-list-item [indexOfPost]="i" [item]="it">

Thanks for your help if it's not a bug or feature

The reOrderItems() function removes all children along with columnWidth selector element.

Masonry options

{
...
    "columnWidth": ".spacer"
...
}

The prototype class has the following code which breaks the grid during items reorder.

NgMasonryGridService.prototype.reorderMasonryItems

This code removes the first spacer element in the grid, which causes the grid misalignment.

            while (this.el.hasChildNodes()) {
                   this.el.removeChild(lastChild);
            }

Please add an condition to check if the columnWidth is an integer or string. If its string then a selector is being used, the removeChild() function can be skipped for columnWidth element.

Error while updating the project to Angular 8

In Grid layout when we refresh page it reorder the images, but i want to show ordered images like first images should always come first.

Does not add random heights to images:

<ng-masonry-grid [masonryOptions]="{ transitionDuration: '0.4s', gutter: 10, horizontalOrder: true }"
      [useAnimation]="true" [useImagesLoaded]="true" (onNgMasonryInit)="onNgMasonryInit($event)"
      [scrollAnimationOptions]="animOptions">
      <ng-masonry-grid-item id="{{'masonry-item-'+ (i)}}" *ngFor="let item of masonryItems; let i = index;">
        <img [src]="item.src">
      </ng-masonry-grid-item>
 </ng-masonry-grid>

////////
this.masonryItems = [
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 1 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 2 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 3 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 4 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 5 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 6 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 7 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 8 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 9 },
{ "src": "/assets/CATEGORY/XDReviews_Category_categorypost6.png", "count": 10 },
]

i want to use grid for rtl content.

Getting the following errors in the console when trying to init a collection of items without an image:

Cannot read property 'slice' of undefined
at SubClass.proto._getColGroupY (masonry.js:160)
at SubClass.proto._getHorizontalColPosition (masonry.js:177)
at SubClass.proto._getItemLayoutPosition (masonry.js:108)
at SubClass.eval (outlayer.js:322)
at Array.forEach (<anonymous>)
at SubClass.proto._layoutItems (outlayer.js:320)
at SubClass.proto.layoutItems (outlayer.js:288)
at SubClass.proto.appended (outlayer.js:689)
at NgMasonryGridService.add (ng-masonry-grid.umd.js:405)
at NgMasonryGridComponent.add (ng-masonry-grid.umd.js:736)

Template:

:host >>> .item {
   width: 200px;
   height: 200px;
}

<ng-masonry-grid 
[useAnimation]="true">
  <ng-masonry-grid-item 
    *ngFor="let item of items;">
    <div class="item">{{item.name}}</div>
  </ng-masonry-grid-item>
</ng-masonry-grid>

The items show up in view and render, however, the error still fires.

Any ideas?

The problem is when we using module in Ionic 3 with '--prod' flag there is animation issue when removing items: animation calls twice. Without '--prod' mode it works well.

I am using items as @Input() and when items change, grid changes but all items are just displayed below each other, although I checked in inspector the container width allows to fit in more.

Any ideas why this might be happening?

When changing the item class per runtime (button click e.g.) from 2-col layout to 1-col layout or similar the masonry.layout() method ignore it.

<ng-masonry-grid #grid (onNgMasonryInit)="onNgMasonryInit($event)">
 <ng-masonry-grid-item class="card" [ngClass]="getCustomGridClass()">
 </ng-masonry-grid-item>
</ng-masonry-grid>

getCustomGridClass() returns a suitable css media query. All is fine if the browser window is resized. Calling a window.dispatchEvent(new Event('resize')); doesnt work.

So if you call this.masonry.reloadItems() or this.masonry.layout(); doesnt trigger the layout calculator. The only way to get it done is by calling reOrderItems() but this causes a unnecessary performance impact if the grid is full of items.

Workaround for layout changes on the fly is getting done by using the timeout function:

changeGridClass(style: GridClass) {
   this.gridClass = style;
   const that = this;
   setTimeout(function() {
     that.masonry.layout();
   }, 10);
 }``

No errors with log, the behavior wasn't there. Does cli needs additional setup?

I am noticing that masonry.reloadItems() does not seem to do anything. This is problematic for me, as my card collection has sort and filter options and the grid needs to rebuild to match the bound collection (students). Is there a better way to go about this or am I missing something?

student-page.ts

private _masonry: Masonry;
public masonryOptions = {
    columnWidth: 370,
    fitWidth: true,
    gutter: 10, // horizontal space between elements
    margin: 10, // vertical space between elements
    horizontalOrder: true // attempts to maintain left-to-right ordering
};
onNgMasonryInit(event): void {
    this._masonry = event;
}
private refreshMasonry(): void {
    if (this._masonry) {
      this._masonry.reloadItems();
    }
}

student-page.html

    <ng-masonry-grid class="students" 
                    [masonryOptions]="masonryOptions" 
                    [useAnimation]="false" 
                    [useImagesLoaded]="true"
                    [scrollAnimationOptions]="{ minDuration: 0, maxDuration: 0 }"
                    (onNgMasonryInit)="onNgMasonryInit($event)">
      <ng-masonry-grid-item *ngFor="let student of students">
        <app-student-card [student]="student" (searchRequested)="onSearchRequested($event)"></app-student-card>
      </ng-masonry-grid-item>
    </ng-masonry-grid>

I have contents that needs to be in chronological order (I'm using horizontalOrder masonry option), but with useImagesLoaded the items doesn't display accordingly...

I think masonry renders the item who's image loaded first without considering the proper order?

I added a mat -card with some mat -buttons in it.Whenever i click a button ,a reorder or some weird animation is happened.This works fine if i use a normal button

Hello,

At the moment im looking in to creating a page where I have multiple sections with one grid in each section.

Though as of now I'm not able to get it to work as desired - I've tried working with both working with seperate components and the same...

Following link is a quick setup so you're able to see my issue.
https://stackblitz.com/edit/angular-uhzyff

I assume there is something that im missing here?

Thank you for taking the time to look at it!

// Max

The animations are working fine in production but as soon as you build the app for production they stop working without errros.

Hi, I added, NgMasonryGridModule inside mi app.module.ts, this is how I added the masonry grid in my html

<ng-masonry-grid [masonryOptions]="{ transitionDuration: '0.8s', gutter: 5 }" [useAnimation]="true" [useImagesLoaded]="true" [scrollAnimationOptions]="{ animationEffect: 'effect-4', minDuration : 0.4, maxDuration : 0.7 }">
                    <ng-masonry-grid-item id="{{'masonry-item-'+i}}" *ngFor="let image of images; let i = index;">
                        <img src="{{image.url}}" alt="No image" />
                    </ng-masonry-grid-item>
</ng-masonry-grid>

I'm seeing the effect but the masonry grid is not working. Can you help me?

Serve with --AOT option:
Angular: 6.1.7

Dependecies:

"imagesloaded": "^4.1.4",
"masonry-layout": "^4.2.2",
"ng-masonry-grid": "^1.3.0",

Console Error Logs:

ERROR TypeError: Cannot read property 'slice' of undefined at SubClass.proto._getColGroupY (masonry.js:160) at SubClass.proto._getHorizontalColPosition (masonry.js:177) at SubClass.proto._getItemLayoutPosition (masonry.js:108) at SubClass.<anonymous> (outlayer.js:322) at Array.forEach (<anonymous>) at SubClass.proto._layoutItems (outlayer.js:320) at SubClass.proto.layoutItems (outlayer.js:288) at SubClass.proto.appended (outlayer.js:689) at ng-masonry-grid.umd.js:411 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

When using ng-masonry-grid, I find there is a small jumpy type effect when refreshing the page. This occurs in my app as well as your demo: https://ng-masonry-grid.stackblitz.io/ after you add a couple items and then refresh the page, there will be a jumpy, blinking effect. I would like to see a smooth rendering of the grid items.

Is there a solution you recommend to solve this?

Hi, has anyone had any luck getting this to run in Angular 6?

ERROR in node_modules/ng-masonry-grid/ng-masonry-grid.module.d.ts:5:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ng-masonry-grid) which declares NgMasonryGridModule 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.

I have updated my application to Angular 9. And this is what I am getting while building the application.

Angular CLI: 9.1.1
Node: 12.16.2
OS: linux x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.1
@angular-devkit/build-angular 0.901.1
@angular-devkit/build-optimizer 0.901.1
@angular-devkit/build-webpack 0.901.1
@angular-devkit/core 9.1.1
@angular-devkit/schematics 9.1.1
@angular/cdk 9.2.0
@angular/material 9.2.0
@angular/material-moment-adapter 8.2.3
@ngtools/webpack 9.1.1
@schematics/angular 9.1.1
@schematics/update 0.901.1
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.1

I was able to fix the same error for primeng by just updating its version to latest.
Looking for a reply soon...

Hello,

I am fetching my images data with a get promise in Angular 6, like this:

this.getModule.gallery( this.id )
        .then( ( gallery: Gallery ) => {
          this.gallery = gallery;
        } );

And in the template:

<ng-masonry-grid [masonryOptions]="gridOptions"
                       [useAnimation]="false"
                       class="imagesGrid"
                       *ngIf="gallery.images">
        <ng-masonry-grid-item *ngFor="let image of gallery.images; let i = index;"
                              id="{{'masonry-item-'+i}}"
                              class="photo gridItem">
          <a (click)="lightbox(image)"><img [src]="image.large" [alt]="image.title" /></a>
</ng-masonry-grid-item>

But on first load (I'm guessing before cache is created) the layout is messed up, all rows ar stacked on top of eachother. For example, first row has:

{
margin-bottom: 10px;
position: absolute;
left: 0px;
top: 0px;
}

Row 2:

{
margin-bottom: 10px;
position: absolute;
left: 0px;
top: 10px;
}

Row 3:

{
margin-bottom: 10px;
position: absolute;
left: 0px;
top: 20px;
}

After refresh, the second row item gets this css:

{
margin-bottom: 10px;
position: absolute;
left: 0px;
top: 210.25px;
}

Hi, I need your help about a problem with this library. The enter animation glitches when loading the items, bouncing back and forth a few times before settling.

You can see what I mean here: https://gfycat.com/PlushDearFlounder (I suggest turning off "repeat" to see the problem more clearly)
From what I can see, I'd say the items are loaded "in batches", and that causes the loading to be split in two. This is a problem I can live with, but what I'm more interested in is at the end, when after everything is loaded, the items move away from their position only to come back shortly after.

An interesting detail is that the whole system seems to work kind of fine in development, and then mess up after being built for production. What I mean is that when running from the dev server the same "double loading" happens, but the items don't bounce around after loading.

The same thing happens if I just load the code inside your playground folder.

Here are some info about the project:
Node.js 8.11.1
Angular CLI 1.7.1
Angular 5.2.9
ng-masonry-grid 1.2.4
memo.component.html: https://gist.github.com/masinamichele/42e878a65de9799fc75c2716ebfc94b3
memo.component.ts: https://gist.github.com/masinamichele/6f6ffd23d5f9132623538c30810a7269 (I've removed a lot of unnecessary code from here to ease your reading, if you see errors like leftover parentheses or similar I assure you they're not there in the real code)

If I scroll the page or remove an item, the masonry works perfectly fine in both environments, reorders the items and no glitches happen.

Thanks for any help. If you need more informations just ask and I'll provide them.