Lazy loading image URLs from the backend

[shotyme]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[X ] Support request

Current behavior

I have a backend which provides me the image URLs for each specific detail page where I use the gallery. So I am not able to provide the image URLs in the code like in all examples. My service is loading the URLs with a delay and updates the image array when the request is finished. The problem is the gallery does not recognize the updated image array and no picture is shown.

Expected behavior

An automated update when the image array is changed or the ability to update the gallery manually. Is this possible? I could not find anything in the examples.

Code Example

images: Image[] = [];

  ngOnInit() {
    this.imageService.loadImages()
      .subscribe(
        res => this.buildImageArray(res),
        error => MessageToast.showError(error)
      );
  }

  buildImageArray(imageUrls: string[]) {
    imageUrls.forEach((item, index) => {
      const img = new Image(
        index,
        {
          img: item
        }
      );

      this.images.push(img);
    });
  }

Environment (the most important section to fill very carefully)

- Node version: 6.11.1
- npm version: 3.10.10 
- Operating System and version:  Win 10
- Angular version: 5.2.9
- angular-cli version: 1.7.3
- I'm using Server Side Rendering with angular-universal: NO
- I'm compiling with mode: DEBUG 

Browser:
- [ X] Chrome (desktop) version 66
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[Ks89]

Hi,
please don't use "this.images.push(img);". When you want to modify images, you have to re-assign the array to the images input because I'm using OnPush strategy to improve performance.
So, don't do this.images.push, but instead:

const newImageArray= ....;
this.images = newImageArray;

otherwise change detection won't be triggered.

[dbayonacode]

Thanks for the great library. I think the solution of this issue should be part of the documentation.

[Ks89]

@dbayonacode thank u. yes it's a good idea. I'll schedule it for the next major release 7.0.0
#144