Render a conditional Angular component containing a <swiper-slide> in parent <swiper-container>

[yoojene]

Hi SwiperJS community!

I'm have Angular / Ionic app that needs to show a set of <swiper-slide>'s nested within a separate Angular component under a single <swiper-container>. The child component is conditionally rendered based on selections made in the initial slides and changes the number of total slides viewable.

When I toggle the condition, the new slide content appears but it doesn't appear as a new in the correct place within the array of the other slides, items like the aria numbers are missing and the rendering is also off. I wonder if there a way to get the new <swiper-slide> into the correct slot from within a child component?

I have a StackBlitz with the example here, curious to know if anyone else has had a similar issue or requirement and how they got around it?

https://stackblitz.com/edit/angular-oq2qea-yndkav?file=src%2Fapp%2Fexample.component.html

Thanks!