Swiper slide elements not being initialized correctly with *ngFor

[StephanBis]

Check that this is really a bug

• I confirm

Reproduction link

Should be pretty obvious

Bug description

We are using the web component version of Swiper in our Ionic 7 and Angular 16 app.

We have a generic Swiper implementation which receives an array of Angular components. Swiper slides are being generated by using *ngFor on the component array and we can see the actual DOM being generated correctly. However, it seems that the slides aren't being hydrated properly.

HTML:

  <swiper-container>
    <swiper-slide *ngFor="let component of components">
      Dynamic component: {{ component.name }} <!-- Simplified -->
    </swiper-slide>
  </swiper-container>

TS:

  components: any[] = [
    WizardRecipeComponent,
    WizardStepsComponent,
    WizardTurnOnComponent,
    WizardBluetoothOnComponent,
    WizardConnectComponent
  ];

Expected Behavior

That the slides would get hydrated correctly, so that simple methods like .slideNext() work as expected.

Actual Behavior

E.g. .slideNext() only works for hardcoded slides or slides getting generated from a simple string array.

HTML:

  <swiper-container>
    <swiper-slide>
      I'm slide 1
      <ion-button (click)="doNext()">Next</ion-button>
    </swiper-slide>
    <swiper-slide>
      I'm slide 2
      <ion-button (click)="doNext()">Next</ion-button>
    </swiper-slide>
    <swiper-slide *ngFor="let item of test">
      I'm slide {{ item }}
      <ion-button (click)="doNext()">Next</ion-button>
    </swiper-slide>
    <swiper-slide *ngFor="let component of components">
      I'm slide x
      <ion-button (click)="doNext()">Next</ion-button>
    </swiper-slide>
  </swiper-container>

TS:
test: string[] = ['1', '2', '3'];

Generated HTML:

As you can see the last couple of slides aren't being hydrated correctly. You cannot swipe or slide to these ones.

Swiper version

10.0.3

Platform/Target and Browser Versions

Android

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[github-actions]

Hello @StephanBis. Please provide a online reproduction by codesandbox or a minimal GitHub repository. You can fork one of our demos in codesandbox to get start. Issues labeled by missing demo will be closed if no activities in 3 days.

[StephanBis]

After more trial & error we found the error. We had to add and *ngIf to the container of the swiper container so that it only gets initialized when the components array is filled with data.

[zqzy]

you can tell me to do ?

[StephanBis]

you can tell me to do ?

For example.

<div *ngIf="users && users.length > 0">
  <swiper-container>
    <swiper-slide *ngFor="let user of users">
      {{ user.fullName }}
      <ion-button (click)="goNext()">Next</ion-button>
    </swiper-slide>
  </swiper-container>
</div>