[Fixed] Ionic4 ion-slide, not working property when loop config is on

Issue

With simple reproduction

config = {
...
loop: true,
...
}

<ion-slides (options)="config">
  <ion-slide *ngFor="let item of [1, 2, 3]">
    <div (click)="clickedMe()">Content goes here</div>
  </ion-slide>
</ion-slides>

clickMe() {
  console.log('hey me clicked');
}

Loop is not working properly. Actually because of loop we should see 4th item, (which is actually first one) but click event is not firing.

Any clue?

Solution

I have a tricky solution here.

@ViewChild('slides') slider: IonSlides;
...
slideDidChange(event) {
  // first and last slides are duplicate slides
  this.slider.getActiveIndex()
    .then(async (activeIndex: number) => {
      const slideCount = await this.slider.length();
      if (activeIndex === slideCount - 1) {
        this.slider.slideTo(1, 0);
      }
      if (activeIndex === 0) {
        this.slider.slideTo(slideCount - 2, 0);
      }
    });
}

<ion-slides [options]="config" (ionSlideDidChange)="slideDidChange($event)" #slides>