HTML not getting updated after adding new elements in galleryItems about lightgallery HOT 2 CLOSED

@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!

from lightgallery.

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.

from lightgallery.