angular-material-simple-lightbox-function.ts

imageCollection: string[];
  selectedImage: string;
  imageIndex: number;
  currentImage: string;

  constructor(
    public dialogRef: MatDialogRef<LigthboxModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  ngOnInit() {
    this._processImageList();
  }

  next() {
    if (this.imageIndex === this.imageCollection.length - 1) {
      this.imageIndex = 0;
    }
    this.currentImage = this.imageCollection[(this.imageIndex += 1)];
  }

  prev() {
    if (this.imageIndex === 0) {
      this.imageIndex = this.imageCollection.length - 1;
    }
    this.currentImage = this.imageCollection[(this.imageIndex += -1)];
  }

  _processImageList() {
    const rawData = this.data.imageCollection.tabDetails;
    this.imageCollection = rawData.flatMap((el: any) => el.imageData);
    this.imageIndex = this.imageCollection.findIndex((x) => x === this.data.selectedImage);
    this.currentImage = this.imageCollection[this.imageIndex];
  }