IonSlide : View is not updated?

Hello there!

I do a bug for with the IonSlides. Only on mobile, sometimes my view is not updated, I have to tap the slider to make the content visible (otherwise I only have the spinner).

My slider is here in the view :

<ion-slides #slides

            <ion-slide *ngFor="let date of dates; index as i; trackBy: trackByDate">

                <div *ngIf="i !== currentSlideIndex">
                    <ion-spinner color="primary"></ion-spinner>

                <ion-grid *ngIf="i === currentSlideIndex">
                        <ion-col size="12">
                            <h2 class="ion-text-capitalize ion-text-center text-font-primary">
                                {{ date | date:'EEEE d MMMM y' }}
                    <ion-row class="ion-margin-top">
                        <ion-col size-xl="3" size-md="6" size="12" *ngFor="let meal of user.meals; trackBy: trackByMealKey">
                            <!-- Meal passed is just a template -->
                            <app-meal *ngIf="meal.used" [date]="date" [meal]="meal"></app-meal>

My typescript file :

  @ViewChild('slides') slides: IonSlides;

  public dates: Array<Date> = new Array<Date>(15);
  public currentSlideIndex = 7;

  ngOnInit(): void {

      const dates =  new Array<Date>(15);
      const dateFirst = new Date();
      dateFirst.setDate(new Date().getDate() - 7);

      for (let i = 0; i < 15; i++) {
        let date = new Date();
        let dateDay = dateFirst.getDate();
        let dateMonth = date.getMonth();
        date.setDate(dateDay + i);
        dates[i] = date;

      this.dates = dates;

I want the first slide to be the 7th, so I am able to navigate a week before and after.

When I display the index in the page, when it bugs i = 0 in the view, when it works i = 7.

I tried so many things to fix that, I do not know how to do next.

PS: Trying to use this.changeDetectorRef.markForCheck(); did not help.

Thank you for your help :slight_smile: