Dynamically change images and then call the method openPreview but report error

Hi,

Firstly, I mark down ngx-gallery component in html like below, while the variable galleryImages is empty. <ngx-gallery [images]="galleryImagesList" [options]="galleryOptions" #onlyPreviewGalleryHtml></ngx-gallery>

The variable galleryImage and others is defined in typescript file as : public galleryImagesList: NgxGalleryImage[] = new Array<NgxGalleryImage>(); public galleryOptions: NgxGalleryOptions[] = new Array<NgxGalleryOptions>(); @ViewChild('onlyPreviewGalleryHtml') public onlyPreviewGallery: NgxGalleryComponent; ngOnInit(): void { this.galleryOptions.push( { image: false, thumbnails: false, width: ‘0px’, height: ‘0px’ }, { image: false, thumbnails: false, width: ‘0px’, height: ‘0px’, previewZoom: true, previewRotate: true, previewCloseOnClick: true, previewCloseOnEsc: true, previewFullscreen: true, previewKeyboardNavigation: true, previewDescription: true, }, ); }

Secondly, I mark down one button in html, <button (click)=“openPreview()”>open preview</button> and the function openPreview is defined as :

openPreview(): void { this.galleryImagesList.push({ small: ‘assets/tmp/img/1.png’, medium: ‘assets/tmp/img/1.png’, big: ‘assets/tmp/img/1.png’, }); this.galleryImagesList.push({ small: ‘assets/tmp/img/2.png’, medium: ‘assets/tmp/img/2.png’, big: ‘assets/tmp/img/2.png’, });

console.log(this.onlyPreviewGallery.images);

this.onlyPreviewGallery.openPreview(0);

}

so that, you may see I just want to dynamic set the gallery’s images, however, when I first click the button, it report error as below, while you can see the images list is correct.

And then I click the button again ,it now worked !

so it is quite strange !

[Gurezkiy]

Use ChangeDetectorRef before calling openPreview. Example:

@ViewChild('gallery', {static: false}) gallery: NgxGalleryComponent;

constructor(private changeDetectorRefs: ChangeDetectorRef) {
    //******
}

view (url) {
    this.gallery.images = [
      {
        small: url,
        medium: url,
        big: url
      }
    ];
    this.changeDetectorRefs.detectChanges();
    this.gallery.openPreview(0);
}

[hpawe01]

@stringhuang: Sometimes pushing into an existing array behaves weird. Have you tried setting the array in your openPreview method like this?

this.galleryImagesList = [{
    // image1
  }, {
    // image2
  }];

And can you please try to format your code expamples. Would be way easier to read.

Some other code remarks:

• class variables are public by default (you don’t have to specify this)
• an instance of a typed array variable will get the correct type implicitly

So you could shorten this: public galleryImagesList: NgxGalleryImage[] = new Array<NgxGalleryImage>(); to this: galleryImagesList: NgxGalleryImage[] = [];