Ability to watch for changes about ngx-gallery

[lukasz-galka]

Hi, please check version 0.8.1

[moshecmc]

HI, I checked version 0.8.1 and I am not sure what am I to do, I update galleryImages, but nothing happens.

[lukasz-galka]

I have added example "14. Change Images" on demo page https://lukasz-galka.github.io/ngx-gallery-demo/ and as you can see everything is working fine.

You can check code for demo page here https://github.com/lukasz-galka/ngx-gallery-demo and here is app component https://github.com/lukasz-galka/ngx-gallery-demo/blob/master/src/app/app.component.ts

Maybe try to uninstall and install plugin again?

npm uninstall ngx-gallery
npm cache clear
npm install --save ngx-gallery

Let me know if it helps.

[moshecmc]

I tried reinstalling the plug-in, I cleared my cache, I rebuilt the project. Gallery doesn't update.

I do this throughout my code:

this.galleryImages.push({
  'small': asset.url,
  'medium': asset.url,
  'big': asset.url,
  'description': asset.shotCode.description
});

and I run this:

this.gallery.smallImages = this.galleryImages.map(img => img.small);
this.gallery.mediumImages = this.galleryImages.map(img => img.medium);
this.gallery.bigImages = this.galleryImages.map(img => img.big);
this.gallery.descriptions = this.galleryImages.map(img => img.description);

immediately after, otherwise the gallery will not update.

Does your code account for the following cases:
-Append an array (push/unset) ?
-replace an element in Array (this.galleryImages[0] = newImage;)

[lukasz-galka]

Yes, you are right, it is not working for push/unset or replace. It is because of angular change detection:

"During change detection, when Angular checks components' input properties for change, it uses (essentially) === for dirty checking. For arrays, this means the array references (only) are dirty checked."

from http://stackoverflow.com/a/34799257/5946227

I will take a look on ngDoCheck https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#docheck and try implement custom login for change detection.

[moshecmc]

As you can see my use case does require checks to see if the array has been pushed/unset, or had elements replaced. Is there a temporary workaround for this issue?

Thanks

[lukasz-galka]

As described here http://stackoverflow.com/a/34799257/5946227

"Assign a new array to rawLapsData whenever you make any changes to the array contents. Then ngOnChanges() will be called because the array (reference) will appear as a change."

You have to create new array on every push/unset/update. For example:

This will not work:

this.galleryImages.push({
  'small': asset.url,
  'medium': asset.url,
  'big': asset.url,
  'description': asset.shotCode.description
});

but this should work:

let newImages = this.galleryImages.slice(0, this.galleryImages.length);
newImages.push({
  'small': asset.url,
  'medium': asset.url,
  'big': asset.url,
  'description': asset.shotCode.description
});
this.galleryImages = newImages;

[moshecmc]

Thank you so much for fixing this issue!