CODEWITHSUNDEEP
angularionic-frameworkionic4
sridharan
sridharan

Reputation: 2065

ionic slider hide next button in last slide ionic 4

ionic slider hide next button in the last slide and hide prev button in the first slide try to implement this using ngIf but it's not working ionic 4

<ion-slides #slides>
(...)
</ion-slides>
<button ion-button *ngIf="slides.isBeginning()">prev</button>
<button ion-button *ngIf="slides.isEnd()">Next</button>

Upvotes: 2

Views: 5593

Answers (1)

AVJT82
AVJT82

Reputation: 73377

isBeginning() and isEnd() return promises so you need to resolve those. Also we would want to listen to when slides change, we can do that for example with the available method ionSlideWillChange. So call a function when slide is about to change and check if the slide is either end or beginning and hide/display buttons according to that.

<ion-slides #slides (ionSlideWillChange)="doCheck()">

We use a helper of two boolean flags disablePrevBtn and disableNextBtn, those we put as the condition for the buttons:

 <button ion-button *ngIf="!disablePrevBtn">prev</button>
 <button ion-button *ngIf="!disableNextBtn">Next</button>

We also need to use ViewChild to get a reference to our slide, so import IonSlides and mark it with ViewChild:

import { ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

// ...

@ViewChild('slides') ionSlides: IonSlides;

we probably want to mark the disablePrevBtn as initially true, and disableNextBtn as false:

disablePrevBtn = true;
disableNextBtn = false;

And finally the function with the two promises, which both return either true or false depending on the case. Based on these booleans, we switch the boolean flags. that keeps track on the slides and toggles the booleans:

doCheck() {
  let prom1 = this.ionSlides.isBeginning();
  let prom2 = this.ionSlides.isEnd();

  Promise.all([prom1, prom2]).then((data) => {
    data[0] ? this.disablePrevBtn = true : this.disablePrevBtn = false;
    data[1] ? this.disableNextBtn = true : this.disableNextBtn = false;
  });
}

Upvotes: 10

Related Questions