Reset p-galleria

[lenpino]

Hello. How can I reset the items on a p-galleria?. I have a dialog that contains a component that has a p-galleria. The problem I have is that when I close the dialog from a parent component, and then I open the dialog again (these are products, each time the diaplog opens, shows the details of the product), for a second I can see the image of the previous product and the thumbs are messed up when the number of images are different between products.

I need to find a way to restore the initial state of the p-galleria. Simply by reseting the items array, does not work

PS. I'm refreshing the child component using ngOnChanges and it works just fine

Any ideas?

[yigitfindikli]

Hi @lenpino!

Can you provide a stackblitz or code example? I suspect the error is about object references.

[lenpino]

I'll try to paste here the relevant pieces:

There is a component called products that list products (original I know). Each product is a component. In the products component I have a modal dialog:

Inside of it there is a component with a datail view of the product. Every time someone clicks on a product from the list, the dialog opens and a call brings the datails of that product:

THIS CODE IS IN THE FICHA COMPONENT

@input() producto: Product;
@input() icono: Storeicon;

productos: Product[];
@output() closeFicha: EventEmitter = new EventEmitter();

private changedProduct: Subscription;
images: any[] | undefined;
responsiveOptions: any[] | undefined;

ngOnChanges() {
if(this.producto) {
if(this.images !== undefined){
this.images.splice(0, this.images.length); <-- HERE I RESET THE ARRAY OF IMAGES
}
this.getProductImages(this.producto.id);
}

THIS SERVICE COLLECTS THE LIST OF URLS

getProductImages(id: number) {
this.mainService.getProductImages(id).subscribe(
(response: Image[]) => {
console.log(response);
this.images = response;
}
);
}

THIS IS THE TEMPLATE OF THE FICHA

			<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-height': '300px' }" [numVisible]="5" #imagenes>
			    <ng-template pTemplate="item" let-item>
			        <img [src]="item.url" style="max-height: 240px;" />
			    </ng-template>
			    <ng-template pTemplate="thumbnail" let-item>
			        <div class="grid grid-nogutter justify-content-center" style="background-color: white;">
			            <img [src]="item.url" style="max-height: 60px;"/>
			        </div>
			    </ng-template>
			</p-galleria>

The first time I open the dialog, everything works great. But if I close it and then open the dialog for another product I get all sorts of strange behaviours.

First, I see the previous image before the right one is shown. Like is displaying and then updating the view (maybe I shoud use a Resolver here?,)
When the number of images is bigger, things tend to work ok, but as soon as I open a product with less images, the caroucel acts weird, like using wrong alignment of the images. Some other times the image the main image is not updated but the caroucel is, sometimes I get an error from the template indicating that the url attribute is not there,, but it is. This former problem solves itself if I bring a product with many images... etc

All kinds of weird stuff happening in the refresh

Any ideas???

[yigitfindikli]

Hi @lenpino, thanks for the sample code!

Actually, this line of your code does not change reference.

this.images.splice(0, this.images.length); <-- HERE I RESET THE ARRAY OF IMAGES

I created a sample project on code sandbox.

changeArrayWithSplice() {
    this.images.splice(0, this.images.length);

    this.changeImages();
  }

  changeArrayWithoutSplice() {
    this.images = null;

    this.changeImages();
  }
  
  changeImages() {
    this.loading = true;

    setTimeout(() => {
      this.images = [...this.newImages];
      this.loading = false;
    }, 1000);
  }

Summary:
When the loading property is true images should be empty. If images can be shown when the loading property is true then the reference is not changed.

Conclusion:
this.images = null; should fix that issue.

Sample:
https://codesandbox.io/s/primeng-galleria-basic-demo-forked-yq6zjh?file=/src/app/demo/galleria-basic-demo.html

[lenpino]

Thanks for the response. Still using this.images=null creates the same problems. It looks like the module p-galleria holds some information internally. I think this because if I recreate the component, always works fine on the first view.
Remember that this component lives inside a modal that is part of the parent definition. The list of products it's created once and with that the modal is loaded and the init of the component that holds the galleria is invoked. Succesive calls do not call the init. Only by the change on the data is that the ngonchanges is call and executed, there I have the chance to refresh the information and the refresh of the images in the galleria it is messed up.

I'm aware that the images reference is not changed, I just want the reference to be cleaned. It would be a bad idea to move that reference.

Any other idea?

[lenpino]

I changed the implementation using p-carousel and it works perfectly well. I still think that there is a bug somewhere in the p-galleria, where it keeps some information beyond the reference to the array.

[yigitfindikli]

Thanks a lot for the feedback @lenpino! Please provide a codesandbox/stackblitz, if really there's an issue we can reproduce and fix it!