I'm using ngx-gallery to display images. I want to reload the images or have them refreshed in the thumbnail gallery, main image and full page image when I modify the order (ex. swap image 1 and 3 in the image array)
Problem - I can't figure out how to reload/reset/rerender/refresh the thumbnail gallery. If there isn't a ngx-gallery way to do it, maybe there is a typescript way?
Here is what I've tried so far
<ngx-gallery #gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
In my .ts file
set images to null then replaced the images:
this.galleryImages = null;
this.galleryImages = this.memberService.member.photos;
used the show(0) method from the documentation - displayed image 0 but didn't rearrange order in the thumbnail gallery
@ViewChild('gallery') gallery: NgxGalleryComponent;
this.gallery.show(0);
I also tried
this.gallery.thubmnails.reset(1);
this.gallery.thubmnails.reset(0);
this.gallery.ngOnInit();
Update - I found the thumbnail property inside the component, so I can change the thumbnail ordering, but can't still find a way to alter the main image ordering.
Here is what I did to alter the thumbnail ordering
[this.gallery.thubmnails.images[index], this.gallery.thubmnails.images[0]]
= [this.gallery.thubmnails.images[0], this.gallery.thubmnails.images[index]];
but this doesn't change the order of the other images and when I tried to use the same approach it didn't work for the bigger (full page, page) images.
Update2 I used an interval to provide a work around and get it to do what I wanted. After I reordered 'this.memberService.member.photos', I cleared out the array then reset it with values. Without the interval it doesn't work.
[this.memberService.member.photos[index], this.memberService.member.photos[0]]
= [this.memberService.member.photos[0], this.memberService.member.photos[index]];
this.galleryImages = [];
setInterval(() => {
this.galleryImages = this.memberService.member.photos;
}, 0);