ionic framework slides component "loop" option

Question

I am currently developing an application using Ionic-Angular. for slides I am using ionic 4 ion-slides component and every thing works fine but I was looking for a way to loop the slides so that user can have swipe with no locking at the end of array according to ionic docs => ion-slides

and Swiper API

I can achieve this by using loop property in options, so I followed the instruction but it doesn't seem to work and the slide locks at the end of the array My HtMl code is:

<ion-slides #theSlides [options]="slideOpts"   id="peerSlide">
    <ion-slide *ngFor="let peer of peers;let i = index">
       <img id="{{'x' + i}}" class="peerIcon" [src]="peer.icon" >
     </ion-slide>
</ion-slides>
<img class="nextIcon" src="../../assets/imgs/nextIcon/nextIcon@3x.png" (click)="moveToNext(theSlides)">
<img class="prevIcon" src="../../assets/imgs/prevIcon/prevIcon@3x.png" (click)="moveToPrev(theSlides)">

and my.ts file:

export class LivePage implements OnInit {
  @ViewChild('theSlides' , {  static: true }) slides: IonSlides;
 
  slideOpts = {
  loop: true,
   };

  ...
  moveToNext(slides) {
   slides.slideNext()
  }
  moveToPrev(slides) {
   slides.slidePrev()
  }
 }

I appreciate if you can tell what is wrong here with my code thank you.

Update: when i try it with out ngFor the loop will work fine but with ngFor it doesn't

Answer 1

It's worked for me with same code ("@ionic/angular": "^5.0.0") try to update your dependancies