*ngFor and ngxViewer is not working well together

[elrondfeng]

I am using angular 12 and I have the following code. the issue is when I click on each image, nothing happens, no popup. However, if I remove *ngFor and manually put the image url in img tag, it works fine.

<div ngxViewer>
  <ng-container *ngFor="let display of image_displays">
    <img src="{{display.url}}" alt="img"/>
  </ng-container>
</div>

[awunnenb]

same problem here. *ngFor will not work. It works only with static img elements and url's.

[guisp]

I was having the same problem when getting data later from a remote server.

In my case, I needed to run the ngxViewer update function manually after updating the source variables of my *ngFor.

component.html

<div ngxViewer [viewerOptions]="viewerOptions" #imageViewer >
    <img
        *ngFor="let image of images"
        src="{{ image.url }}"
        alt="{{ image.filename }}"
      />                                    
</div>

component.ts

// Getting the elem to interact with
@ViewChild(NgxViewerDirective) imageViewer!: NgxViewerDirective; 
...
this.images = [...this.images, ...images];
this.imageViewer.instance.update();

[delvinwidjaja]

Hi @guisp thanks to your comment, I can solve my problem. I have a question tho:
My component does contain icons, that are made of <img> and they will be rendered to the imageViewer as well.
Is this the expected behavior or did I miss something?

[raihan-talukder]

I am also facing same problem with angular 11. Any suggestions for me?

[raihan-talukder]

I resolve my problem using bellow code:
@ViewChild(NgxViewerDirective) imageViewer: NgxViewerDirective;
setTimeout(() => {
this.imageViewer.instance.update();
}, 3000);

[khiemng]

I have resolved the problem by using ChangeDetectorRef

constructor( private ref: ChangeDetectorRef )
...

.subscribe(res => {
     this.images = res;
     this.ref.detectChanges();
     this.imageViewer.instance.update();
   })