Ionic 4 Slides

Ionic Framework
1

Just as an FYI… in Beta 2, this works about half the time, and the other half I get “ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘activeIndex’ of undefined”. Obviously, I can’t rely on slides being ready to be used in the ionViewDidEnter event, so what would be the proper way to do it in Beta 2 and going forward?

import { Slides } from '@ionic/angular';

@Component({
  ...
})
export class TutorialPage {

  @ViewChild('slides', { read: Slides }) slides: Slides;

  ionViewDidEnter() {
     console.log('ionViewDidEnter slideIndex: ' + this.slides.getActiveIndex());
  }
}

I’ve seen several posts that you need to wait for the ionSlidesDidLoad event, but I can’t figure out a way to do it (or maybe an event to attach to it in) that actually fires the event consistently…

This never seems to fire the event

  ngOnInit() {
     this.slides.ionSlidesDidLoad.subscribe((value) => {
        console.log('StartPage ngOnInit ionSlidesDidLoad');
     });
  }
2

I’ve got problem with activeIndex too, it’ a good idea to subscribe to ionSlidesDidLoad, I may try, thx for the fix :slight_smile:

Right now, to overcome that problem I just do the following because I only use getActiveIndex in method with a boolean return value

 isFistIndex(): boolean {
   try {
      return this.slides && this.slides.getActiveIndex() === 0;
   } catch (err) {
       return true;
   }
}
3

A trick I have used before is a setter:

  slides: Slides;

  @ViewChild(Slides) set slidesvc(slides) {
    this.slides = slides;
  }

This has helped me before particularly when dealing with slides that are dependent on ngFor conditions. Perhaps it might also aid in this situation.

1 Like
4

If posted a detailed solution here, check it out: