HTML not getting updated after adding new elements in galleryItems

[himanshi-proximous]

Description

I am adding new images using refresh method, it is updating my galleryItems in lightGallery but not adding the html for new items

Steps to reproduce

JS code that you use to initialize lightGallery.

this is the function I am calling from a parent component in angular: updateGallery(lightGallery: LightGallery): void { this.dataArray = this.dataService.getArray();

const galleryItems = this.dataArray.map((src: any, index: number) => ({
  src: src.fileUrl,         
  downloadUrl: src.downloadUrl,
  thumb: src.thumbUrl,     
  alt: src.mime_type, 
}));

this.images = [
  ...this.images,
  galleryItems
];

this.lightGallery = lightGallery;
this.lightGallery.refresh(galleryItems);

}

[bytesandbots3]

@himanshi-proximous , Based on the given code, it seems that you are trying to update the gallery by adding new images using the refresh method. However, it appears that the HTML is not getting updated with the new items.

One possible reason for this issue could be that you are not updating the this.images array correctly. In the code snippet you provided, you are spreading the galleryItems array inside another array when updating this.images. This will result in a nested array structure, which might not be handled correctly by the HTML rendering.

To fix this issue, you can update the this.images array directly with the new galleryItems array, without spreading it inside another array. Here's an updated version of your code:

updateGallery(lightGallery: LightGallery): void {
  this.dataArray = this.dataService.getArray();

  const galleryItems = this.dataArray.map((src: any, index: number) => ({
    src: src.fileUrl,         
    downloadUrl: src.downloadUrl,
    thumb: src.thumbUrl,     
    alt: src.mime_type, 
  }));

  this.images = [
    ...this.images,
    ...galleryItems
  ];

  this.lightGallery = lightGallery;
  this.lightGallery.refresh(this.images);
}

By updating this.images with the new galleryItems array directly, the HTML should now be updated correctly when calling the refresh method.

I hope this helps!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.