Ion-slides loop property doesn't work with ngFor

Ionic Framework Ionic Angular
1

Hi everyone I am currently testing the “ion-slides” component with ngFor loop for my ionic-angular app and I have a problem; I followed the instruction from documentation
(https://ionicframework.com/docs/api/slides) and https://swiperjs.com/api/
and when I dont use the ngFor it works fine but ngFor loop it doesn’t work and the slide locks at the end of the array

my html code:

<ion-slides #theSlides [options]="slideOpts">
        <ion-slide *ngFor="let peer of peers" >
          <p>peer</p>
        </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)">

<ion-button (click)="click()"></ion-button>

and .ts

@ViewChild('theSlides' , {  static: false }) slides: IonSlides;
peers:any[] = []

  slideOpts = {
    loop: true,
    slidesPerView: 3,
  };
  

  constructor() {}


  moveToNext(slides) {
    slides.slideNext()
 }

  moveToPrev(slides) {
    slides.slidePrev()
  }

  click () {
    var peer
    this.peers.push(peer)
  }

the other properties of slideOpts works like a charm but not loop property.
I appreciate if you can tell what is wrong here with my code thank you.

2

Hello @Taraa,
Please try below code. I tested on Ionic 5 it works. You can use h1 or img and make some style changes.

TS Code

slides = [
    { name: "Slide 1", imgUrl: "https://global.discourse-cdn.com/ionicframework/original/3X/9/4/94850a46742204751c28bbe6d78168d7e870ce80.png" },
    { name: "Slide 2", imgUrl: "https://global.discourse-cdn.com/ionicframework/original/3X/9/4/94850a46742204751c28bbe6d78168d7e870ce80.png" },
    { name: "Slide 3", imgUrl: "https://global.discourse-cdn.com/ionicframework/original/3X/9/4/94850a46742204751c28bbe6d78168d7e870ce80.png" }
  ]
  slideOpts = {
    initialSlide: 1,
    speed: 400
  };

HTML Code:

<ion-slides pager="true" [options]="slideOpts">
        <ion-slide *ngFor="let slide of slides">
            <h1>{{slide.name}}</h1>
            <img src="{{slide.imgUrl}}" />
        </ion-slide>
    </ion-slides>
3

hi @aalbayrak thanks for your reply and it works but there is a problem here for me; in my app the objects of “slides” array are dynamic and i have to push them to array whenever they are ready from server so i cant set the name and source like here in your code

4

Please, Could you share response the “array || Object” from the server. If we see the type of response, we can solve it.(Just write console.log(response) after you call http get method)

5

there is service that i use and the peer object is creating successfuly and shows properly in slider
this is my actual code:

peers:any[] = []

@ViewChild('theSlides' , {  static: false }) slides: IonSlides;
slideOpts = {
loop: true,
    };
this.myService.peer_profile_ready.pipe(
      takeUntil(self.unsubscribe$)
  ).subscribe(
      peer => {
         
          var peer = {
              id: 1,
              firstname: peer.firstname
              lastname: peer.lastName,
              status: peer.status,
              icon: '../../assets/imgs/userIcon/userIcon@3x.png',
              
          }
              this.peers.push(peer)
{)

and .html

<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"  >
           <p class="peerFirstname">{{peer.firstname}}</p>
           <p class="peerLastname">{{peer.lastname}}</p>
           <p class="peerStatus">{{peer.status}}</p>
         
       </ion-slide>
        </ion-slides>
6

Is the problem solved ?

7

the slider is showing every thing fine but loop property of slideOpts doesn’t work and it locks at the end of array

8

Add loop:true to your slide options
If not solved please check log to check if there is error on end.

slideOpts = {
    initialSlide: 1,
    loop: true,
    speed: 400
  };
9

i did, but it doesn’t work and there is no error unfortunately

10

Everything works fine with mine. Please write ionic info and share the output in console.

11

yes its frustrating for me now, thanks for your time
info:

Ionic:

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.8.1
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 6.3.0
Cordova Platforms : ios 4.2.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)

Utility:

cordova-res : not installed
native-run : not installed

System:

ios-deploy : 1.9.0
NodeJS : v10.15.3 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra

13

Hey @Taraa I resolved the same issue here testing the <ion-slides> node with *ngIF and the length of your dynamic array.

<ion-slides #theSlides [options]="slideOpts" *ngIf="peers.length > 0">

Then the HTML ion-slides element will be set up only when data is loaded

Cheers

2 Likes
14

Hi @MathieuNa I was dealing with this problem for a long time and kinda gave up on finding the solution.
thank you so much for you kind sharing.