Angular ngx-image-viewer how to trigger an event on click of Next and Previous images

Question

I have implemented displaying images using ngx-image viewer in Angular. By default next(>), previous(<) buttons are displayed. On click of next/previous arrow I want to perform an event. As these are default icons, I am stuck on how to call the event on click of the icons

I have tried as below:

HTML

<ngx-image-viewer [src]="images"
    (next)="gonext($event)"
    (previous)="goprevious($event)">
</ngx-image-viewer>

TS Code

gonext(event){
  console.log("event next",`${event.name}`);
}

goprevious(event){
  console.log("event previous",`${event.name}`);
}

ngx options for an image

Answer 1

You can use indexChange event to do some task on prev/next button click.

It has @Output() indexChange: EventEmitter<number> = new EventEmitter(); which is emitted on prev/next button click.

For more please refer: https://github.com/jpilfold/ngx-image-viewer/blob/master/src/app/image-viewer/image-viewer.component.ts