Order of items not working

[wynfred]

Order of items not working

[wynfred]

@ifumi right, put the items to an array like pendingItems, and use an event from image item
<img src="{{imageUrl}}" (load)="loaded.emit()" (error)="loaded.emit()">.
When your masonry component gets the loaded event do
this.cardItems.push(this.pendingItems.shift());

[wynfred]

https://github.com/wynfred/ngx-masonry#faq

Images are downloaded asynchronously so the order is not guaranteed. I have plan to support synchronous loading but it's gonna take time.

[ifumi]

Is there a way to implement synchronous loading of the images myself? So basically wait for each image in the array to be loaded before setting the next image?

[ifumi]

Great! Thank you for making that clear for me. I got it working that way and it also looks super smooth now with the images loading one by one!

[ifumi]

But this means, there is no way to add items to the beginning of the masonry without reloading the whole view, right?

[wynfred]

There is a prepend function but no insert, so you can add items to the beginning but not in the middle. https://masonry.desandro.com/methods.html#prepended

[ifumi]

Could you give a short example on how to accomplish that? There is no prepend on NgxMasonryComponent, only add.

[wynfred]

you can access the masonry instance and call any native functions you need https://github.com/wynfred/ngx-masonry/blob/master/src/lib/ngx-masonry.component.ts#L35

change this to prepended https://github.com/wynfred/ngx-masonry/blob/master/src/lib/ngx-masonry.component.ts#L107

[ifumi]

Ok, but how would I do this in my case with a new "app-image-wall-post" component?
To clarify my problem: Im getting images from a database when a user uploads a new image, and I always want to display the newest image at the top -> e.g. add a new app-wall-post-component with the corresponding image to the beginning. How would I add this component dynamically from my code to the masonry?

Sorry if my questions are silly, but I'm quite new to web/angular development.

[wynfred]

Hi, try the new release with option prepend!
<div ngxMasonryItem [prepend]="image.prepend" *ngFor="let image of masonryImages">

[yingwei1025]

Hi wynfred, i also face this not in order problem when card div have to load the image, without image is work fine

i using prepend but it seem no work, am I use it incorrect?

<ngx-masonry [options]="masonryOptions">
<mat-card ngxMasonryItem [prepend]="post.prepend" *ngFor="let post of eventPostList">
<img mat-card-image src="{{ post.cardImgUrl }}" />
<mat-card-content fxLayout="column">
<span>{{ post.postTitle }}</span>
<span>Post : {{ post.postDate }}</span>
<p align="justify">{{ post.postDesc }}</p>
</mat-card-content>
</mat-card>
</ngx-masonry>

[wynfred]

HI @yingwei1025 , prepend doesn't help get items ordered. You could read the first 3 comments about how to load an ordered list. LMK if you have any questions.

[yingwei1025]

Hi wynfred, I try to apply the solution u provide in 3rd comment to my code but not sure why it no work

my html

<ngx-masonry [options]="masonryOptions">
   <mat-card ngxMasonryItem *ngFor="let post of cardItems" class="grid-item">
     <img mat-card-image src="{{ post.imgURL }}" (load)="loaded()" (error)="loaded()"/>
     <span>{{ post.title}}</span>
  </mat-card>
</ngx-masonry>

my ts

export class NewComponent implements OnInit {
    cardItems: any[];
    pendingItems: any[];
    masonryOptions: NgxMasonryOptions = {
        horizontalOrder: true,
        itemSelector: '.grid-item',
    };

    constructor() {}

    ngOnInit() {
        this.getTestList();
    }

    public geTestList() {
        this.pendingItems= [{
                imgURL: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
                title: 'Post 1',
            },
            {
                imgURL: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
                title: 'Post 2',
            },
            {
                imgURL: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
                title: 'Post 3',
            }
        ]
    }

    public loaded() {
        this.cardItems.push(this.pendingItems.shift());
    }

}

[wynfred]

@yingwei1025 seems like you didn't push the first item to cardItems?

[yingwei1025]

Hi @wynfred , based on your solution this.cardItems.push(this.pendingItems.shift()); means that you push the first item to cardItems when image load ?
But I not sure why console.log(this.pendingItems.shift()) is empty means that it also push empty to cardItems

[wynfred]

@yingwei1025 yes, but you didn't call it in onInit. You need to either initialize the cardItems with one item or call loaded when it's initialized.