Slides don't work if a slide is wrapped within a custom component

Question

I want to wrap my slide component in my own component to achieve ATOM methodology. But since ion-slide is not a direct child of ion-slides anymore it doesn't detect the multiple slides.

This is my app-slide component:

<ion-slide>
  <ng-content></ng-content>
</ion-slide>

Then I call it like this:

<ion-slides>
  <app-slide>Test</app-slide>
  <app-slide>Test 2</app-slide>
  <app-slide>Test 3</app-slide>
</ion-slides>

Stackblitz: https://stackblitz.com/edit/ionic-v4-x7wgrz

Is there a way to ignore the parent? Or how else could I make this work?

Answer 1

You just need some changes to your structure. Please give a try to the below code.

Here is the working code. https://stackblitz.com/edit/ionic-v4-zwjta3

<ion-slides>
    <ion-slide>
        <app-slide>Test</app-slide>
    </ion-slide>
    <ion-slide>
        <app-slide>Test 2</app-slide>
    </ion-slide>
    <ion-slide>
        <app-slide>Test 3</app-slide>
    </ion-slide>
</ion-slides>

Your component file should look like below.

<ng-content></ng-content>

Please let me know if this helps.

Answer 2

I was able to solve this problem using the class swiper-slide as it is originally done in swiperjs .

<ion-slides>
  <app-slide class="swiper-slide">Test</app-slide>
  <app-slide class="swiper-slide">Test 2</app-slide>
  <app-slide class="swiper-slide">Test 3</app-slide>
</ion-slides>

An even better solution in order to not manually type the class everytime is adding a HostBinding to the app-slide component like so:

@HostBinding('class.swiper-slide') swiperSlide: boolean = true;

Working example: https://stackblitz.com/edit/ionic-v4-x7wgrz