Dynamically changing Gallery Width

[chrishandorf]

Template HTML:

<ngx-gallery *ngIf="galleryImages.length" [options]="galleryOptions" [images]="galleryImages">

Typescript:

Imagine a Toggle button on the screen that can change between two different sized image galleries. This isn't my exact use case but it makes the point I am trying to make.

toggle() { // dynamically change gallery width if (this.toggle) { this.galleryOptions = [ { width: "500px", ... } ]; this.toggle = false; } else { this.galleryOptions = [ { width: "200px", ... } ]; this.toggle = true; }

The ngx-gallery doesn't resize even though the above code changes the width.

If I add "this.setOptions();" above the line of code at this location: https://github.com/lukasz-galka/ngx-gallery/blob/ed40e6bb713e4763d58be3f4c7b10eed925d518d/src/ngx-gallery.component.ts#L94

... then everything works perfectly.

Note that it works because I am also changing the this.galleryImages array when I toggle (not shown in code above). A better solution would probably be to keep track of oldOptions the same way the code is keeping track of oldImages and move this check outside of the containing if block:

if (this.oldOptions !== this.options) { this.setOptions(); }

[german-e-mas]

I'm not sure if this could help in this particular case, but I noticed that you need to change the array's reference in order to trigger changes (in Angular in general, not just this component).

So, if you have [options]="galleryOptions" in the template, do the following:

const newOptions = [{ ... }];
this.galleryOptions = newOptions;

[chrishandorf]

Thanks but in this case I don't think it will help because the current code detects changes in the images array but not the options array.

[german-e-mas]

I imagined that as a response to a click in the toggle, for example. If you can detect whether you would need to change the options manually (via an event or something), try that approach though.

I'm not sure what is the exact use case, but have you seen the breakpoint options?

[chrishandorf]

Yes, I'm using the breakpoint options and if I resize the window the Gallery will honor the width value because the ngx-gallery breakpoint code calls this.setOptions() also (on line 106). The usecase is routing to 2 different URLS in Angular such as /pictures/1 and /pictures/2 where the ngx-gallery width needs to be different depending on the ID shown. Angular will reuse the ngx-gallery component and the current code doesn't detect the change in the options. I can also fix the problem by using *ngIf in the template, setting the condition to false to destroy the component, using a setTimeout to give Angular time to destroy, then setting the condition to true to create a new ngx-gallery component. That works but the gallery flashes on screen and its quite a hack. The timeout could also expire before the component is destroyed so its not foolproof either.

[chrishandorf]

On a related note, if you route from /pictures/1 to /pictures/2, go into Preview mode, and then press the back arrow button to go back to /pictures/1 the URL changes but the /pictures/2 Preview mode remains on the screen (component isn't destroyed because the URL still has /pictures in it). An updated version of ngDoCheck() could be be something like this:

ngDoCheck() { if (this.previewEnabled && (this.options !== this.oldOptions || this.images !== this.oldImages)) { this.onPreviewClose(); // force close of Preview because gallery was changed (possible router navigation) }

<existing ngx-gallery ngDoCheck() code here>

if (this.oldOptions !== this.options) { this.setOptions(); } }

[mmmatthew]

I have a similar issue: When I switch from object to object, there are different numbers of images. When I only have one image, I want to hide thumbnails row. However, the gallery doesn't adopt the change I make to the options.