Angular Virtual Slides issue with removeSlide when using Angular template for loop

[kinggolf]

Check that this is really a bug

• I confirm

Reproduction link

https://stackblitz.com/edit/stackblitz-starters-bjqjfw?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

Bug description

We have a flashcard application where we want the user to be able to remove flashcards (slides).
In above StackBlitz, setting AppComponent class variable useAngularTemplate = true shows a basic swiper application where the swiper-slides render via Angular template @for loop. Follow these steps and the below issue will appear:

• refresh application page
• click NEXT button twice (or more)
• click REMOVE button 8 times (or more)
• remaining slides appear as [object HTMLDivElemnent] rather than proper slides

Expected Behavior

In the same StackBlitz set the AppComponent class variable useAngularTemplate = false creates the slides when the Swiper is initialized setting the virtual property as such virtual: { slides },. In this case, following the same steps as above works as expected.

I would use this approach in our actual application but the flashcard slides use an angular template with animations, conditionals, and other Angular specific template details. These flashcard slides will not render properly using this approach.

Actual Behavior

Then this appears on following slides when rendering swiper-slides via Angular template @for loop:

Swiper version

11.1.4

Platform/Target and Browser Versions

Used in Mac & Windows all browsers, and iOS & Android native apps. Testing reported here is on Mac using Chrome.

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

[kinggolf]

I have created a 2nd StackBlitz using Swiper Element rather than Swiper Core: https://stackblitz.com/edit/stackblitz-starters-k8ze2e?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fglobal_styles.css

Similar behavior appears as the above issue. But in this case when using Angular template to generate the swiper-slides, I added an option boolean hardCodeSlides that will either use hard-coded slides or slides created by @for loop. In this latter case the swiper appears to be completely broken, i.e. will not swipe to next slide. It seems like placing some angular specific template code inside the swiper web components creates an issue.

If this needs to be opened as a separate issue, then I am happy to do so.

[adamking]

+1