ionic swiper does not work when conditionally rendered

Question

i am using ionic 7 and swiper component like below

 <ng-container *ngIf="core.loggedIn === true">
    <swiper-container #swiper (afterinit)="swiperReady()" [pagination]="true">
      <swiper-slide style="height: 600px;">
        <ion-row>
          <ion-col class="ion-text-center">
            <ion-button class="ban-half-button" (click)="goNext()">Go</ion-button>
          </ion-col>
        </ion-row>
      </swiper-slide>
      <swiper-slide>
        <ion-row>
          <ion-col class="ion-text-center">
            <ion-button class="ban-half-button" (click)="goNext()">Next</ion-button>
          </ion-col>
        </ion-row>
      </swiper-slide>
 </swiper-container>
  </ng-container>

The code on goNext and the .ts is

import { Swiper } from 'swiper';

export class Tab1Page {

  @ViewChild('swiper')
  swiperRef: ElementRef | undefined;
  swiper?: Swiper;
goNext() {
    this.swiper?.slideNext();
  }

  swiperReady() {
    this.swiper = this.swiperRef?.nativeElement.swiper;
  }
}

This does nothing when i click on goNext() in the above code. However, if i remove the condition

*ngIf="core.loggedIn === true"

from the ng-container then it starts to work. I can sense what is happening here where the swiper does not get to initialize due to delay in when the condition becomes true. But i am not sure how to fix this?

ionic swiper does not work when conditionally rendered

0 Answers0