title: Swiper not rendering in iOS
body: <p>I am trying to understand what went wrong but couldn't figure out.
  The swiper just not rendering in iOS Simulator once I am using ngFor loop.</p>
  <p>I am writing with the latest Ionic Angular + Capacitor.
  <a href="https://i.stack.imgur.com/p0nwt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p0nwt.png" alt="enter image description here" /></a></p>
  <p>On the left is rendered in Ionic Serve, on the right is in iOS Simulator.
  Here's my code in the page.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { SwiperOptions } from 'swiper';
  import { SwiperComponent } from 'swiper/angular';
  import SwiperCore, { Pagination, EffectFade } from 'swiper';
  SwiperCore.use([Pagination]);
  
  config: SwiperOptions = {
      pagination: true,
    }</code></pre>
  </div>
  </div>
  </p>
  <p>And here's the template</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;swiper [config]="config"&gt;
          &lt;ng-template swiperSlide *ngFor="let room of rooms" &gt;
            &lt;ion-card&gt;
              &lt;ion-card-header&gt;
                &lt;ion-card-subtitle&gt;{{room.title.rendered}}&lt;/ion-card-subtitle&gt;
                &lt;ion-card-title color="primary"&gt;{{room.acf.room_no}}&lt;/ion-card-title&gt;
              &lt;/ion-card-header&gt;
              &lt;ion-card-content&gt;
                &lt;ion-item lines="none" class="ion-no-padding"&gt;
                  &lt;ion-chip color="success" slot="end"&gt;&lt;ion-label&gt;Active&lt;/ion-label&gt;&lt;/ion-chip&gt;
                  &lt;ion-label color="medium"&gt;Occupied till {{room.acf.next_available_date}}&lt;/ion-label&gt;
                &lt;/ion-item&gt;
              &lt;/ion-card-content&gt;
            &lt;/ion-card&gt;
          &lt;/ng-template&gt;
        &lt;/swiper&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The weirdest part is once *ngFor is removed and ng-template slides are created individually, it works.</p>
  <p>Hoping someone to guide me out. Thanks!</p>