CODEWITHSUNDEEP
javascriptangularionic-framework
Antoine Grenard
Antoine Grenard

Reputation: 1892

Ionic 4 ion-slides slideOptions ignore the second time

I have a strange behavior with my Ionic 4 App : When I open a modal with slides for the second time my slideOptions are ignored (it work perfectly the first time)

Here is some code

my-card.component.ts :

async openDetail(): Promise<void> {
  const detailModal = await this.modalController.create({
    component: DetailsComponent,
    componentProps: {
      somePros: '...'
    }
  });

  return detailModal.present();
}

details.component.ts :

export class DetailsComponent implements OnInit {

  slideOptions = null;

  ngOnInit() {

    // [...]

    let initialSlide = 0;

    // [...]

    this.slideOptions = { initialSlide };
  }
  ...
}

details.component.html :

<ion-content>

  [...]

  <ion-slides *ngIf="slideOptions" [options]="slideOptions">
    <ion-slide>
      [...]
    </ion-slide>
    [...]
  </ion-slides>
</ion-content>

Upvotes: 2

Views: 837

Answers (1)

Antoine Grenard
Antoine Grenard

Reputation: 1892

Apparently I needed to update the slides for it to work

details.component.ts :

export class DetailsComponent implements OnInit {

  slideOptions = null;

  // ===> Get the reference on the slides here <===
  @ViewChild('slides', {static: true}) slides: IonSlides;

  ngOnInit() {

    // [...]

    let initialSlide = 0;

    // [...]

    this.slideOptions = { initialSlide };

    // ===> Update the slides here <===
    this.slides.update();
  }
  ...
}

details.component.html :

<ion-content>

  [...]

  <!-- ===> Add #slides here <=== -->
  <ion-slides #slides *ngIf="slideOptions" [options]="slideOptions">
    <ion-slide>
      [...]
    </ion-slide>
    [...]
  </ion-slides>
</ion-content>

Upvotes: 1

Related Questions