SUPPORT: Data Binding Errors when populating images from an async function

[dharmeshds]

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'm trying to use the carousel component in my Ionic5/Angular11 app, filling the images array thru an async function that gets the images as Blobs from an api and in case there are no images to fetch it should show the noimage.png from assets folder. , I end up getting several binding errors below at runtime, which I can't figure to solve..

ERROR Error: image must be a valid Image object
    at getIndex (ks89-angular-modal-gallery.js:1922)
TypeError: Cannot read property '0' of null
    at CarouselComponent.ngOnInit (ks89-angular-modal-gallery.js:3830)

The image object created by the function seems to fine as per your documentation as below;

[{
    "id": 0,
    "modal": {
        "img": "/assets/img/port/noimage.png"
    },
    "plain": {
        "img": "/assets/img/port/noimage.png"
    }
}]

Expected behavior

My requirement is to get the images blob array from an external api and populate the [images] array thru an async method.

Minimal reproduction of the problem with instructions

    <ks-carousel id="photos-{{e.eid}}"
                 [images]="getPhotos(e) | async"
                 [playConfig]="playConfig"
                 [carouselConfig]="carouselConfig"
                 [dotsConfig]="dotsConfig"
                 [previewConfig]="previewConfig">
      <div class="projected"></div>
    </ks-carousel>

  async getPhotos(entity: Entity): Promise> {
    if (_.has(entity, 'photos')) {
      return await _.asyncMap(entity.photos, async (p, i) => {
        const photo = await that.getFile(p);
        return new Image(i, {img: photo}, {img: photo});
      });
    }
  }

- @ks89/angular-modal-gallery version: 7.2.7
- Node version: 14.17.0 
- npm version: 6.14.13
- Operating System and version:  Windows 10
- Angular version: 11.2.14
- angular-cli version: 11.2.13
- I'm using Server Side Rendering with angular-universal: NO
- I'm compiling with mode: DEBUG

Browser:
- [x] Chrome (desktop) version XX
- [ ] 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! You should start with an empty array and then fill it (reassigning the array, not simply pushing to objects) in a rxjs subscribe or something similar. Don't use the "| async" and be sure to pass always Image class instances, created via new Image(...).

I never used Ionic, feel free to share a full minimal demo with a Github repo. I can add it to the library as official Ionic example.

[Ks89]

I close the issue. If this is still an issue, feel free to re-open it.