angularionic-frameworkionic4ion-slides

Not able to check whether my slider has come to the last slide or not in Ionic4


I am working in my Ionic 4 app and I have added the slider using the loop and I am checking that whether the slider has come to the last slider or not and I have checked using isEnd() but it is always showing true.

This is my intro.page.html:

<ion-slides #slides pager="true" parallax="true" spaceBetween="0">
    <ion-slide class="step-one" *ngFor="let item of splashdata">
    </ion-slide>
  </ion-slides>
  <p class="myp2" (click)="next()">{{ NextSlide }}</p>

In this view, I am showing the slider in the loop and I am also showing the button next and finish. If the slider comes to the last slide it will show finish other it will show next.

This is my intro.page.ts:

export class IntroPage implements OnInit {
  @ViewChild('slides') slides: IonSlides;
  NextSlide: any;
  constructor() { }

  ngOnInit() {}

  ionViewWillEnter(){
    let me = this;
    me.slides.isEnd().then((istrue) => {
      console.log(istrue);
      if (istrue) {
        me.NextSlide = 'Finish';
      } else {
        me.NextSlide = 'Next';
      }
    });
  }

  next() {
    this.slides.slideNext();
  }
}

In this ts file, I have checked using the isEnd() but the problem is that, it is always showing true.

I want to show the button text according to the slides, if the slider will come to the last slide, the button text will change to finish otherwise it will show next for the slides.

Any help is much appreciated.


Solution

  • First you have to listen ionSlideWillChange() event on ionic slider, then you can check whether slide is end or not. So listen ionSlideWillChange() event in ion-slides as below :

    <ion-slides #slides (ionSlideWillChange)="slideChanged()">
        ...
        ...
    </ion-slides>
    

    Now, you can check slide is end or not in slideChanged() method like :

    slideChanged() {
        let me = this;
        me.slides.isEnd().then((istrue) => {
          console.log(istrue);
          if (istrue) {
            me.NextSlide = 'Finish';
          } else {
            me.NextSlide = 'Next';
          }
        });
    }