Change array order breaks masonry template 🤔

My app consist in an array of item that can be ordered by some filter criteria using a MAT MENU to select the preferred criteria

But when I change the order or my items array masonry is rendered completely wrong, for example:

I have tried as documentation says:

Set [ordered]="true" in template, also use masonry functions to render again when my array is re-ordered

this.masonry.reloadItems();
this.masonry.layout();

This is how it looks ordered at init

Some times the order is applied fine but mostly is rendered wrong

This is my reproduction repo in github https://github.com/AlonsoK28/amazmation-app-2/tree/feature/update-layout because I cant upload it to stackblitz 😢

I hope you can help me 😜👏

[wynfred]

Hi, didn’t realize the order is wrong. Could you try this? Thanks!

  setCurrentOrderBy(el: OrderByDefinition){
    this.orderByPipeConfig = el.config;
    // order all items in array, not only 15
    this.itemsLimit = 15;
    let tempMasonryItems = this.orderPipe.transform(this.offersFromService, this.orderByPipeConfig.expression, this.orderByPipeConfig.reverse, this.orderByPipeConfig.caseInsensitive, this.orderByPipeConfig.comparator).slice(0, this.itemsLimit);
    this.currentMasonryItems = [];
    setTimeout(() => {
      this.currentMasonryItems = tempMasonryItems;
    });
  }

[wynfred]

Hi, it seems like the reloaditems function is causing the problem. Try remove both reloadItems and layout

  showMoreImages() {
    this.itemsLimit += 15;
    this.tempMasonryItems = this.orderPipe.transform(this.offersFromService, this.orderByPipeConfig.expression, this.orderByPipeConfig.reverse, this.orderByPipeConfig.caseInsensitive, this.orderByPipeConfig.comparator).slice(0, this.itemsLimit);
    this.currentMasonryItems = this.tempMasonryItems;
    // this.masonry?.reloadItems();
    // this.masonry?.layout();
  }

  setCurrentOrderBy(el: OrderByDefinition){
    this.orderByPipeConfig = el.config;
    // order all items in array, not only 15
    this.itemsLimit = 15;
    this.tempMasonryItems = this.orderPipe.transform(this.offersFromService, this.orderByPipeConfig.expression, this.orderByPipeConfig.reverse, this.orderByPipeConfig.caseInsensitive, this.orderByPipeConfig.comparator).slice(0, this.itemsLimit);
    this.currentMasonryItems = [];
    this.currentMasonryItems = this.tempMasonryItems;
    // this.masonry?.reloadItems();
    // this.masonry?.layout();
  }