I am trying to add a button under the slider which when pressed should move me to the next slide on the slider. On the last slide I want the button to change. I have tried several functions like the Swipenext and the nex functions but still it is not working an I'm receiving a lot of errors. When I press the next button at the end of the page to go to the next slide, I get two errors on the console and the button does not work. One error states that "Cannot read property 'getactiveindex' of undefined" which is part of the next function in the .ts file, on the local terminal there are no errors and it compiles successfully. I am also trying to change the text in the last slide and I have tried the ionslidechange() function and it is not working
home.html
<ion-content>
<ion-row>
<ion-col>
<div class="ion-text-right">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-title>
<ion-button routerDirection="root" [routerLink]="['/home-ar']">
العربية
</ion-button>
</ion-title>
</ion-buttons>
</div>
</ion-col>
</ion-row>
<ion-slides
[options]="slideOpts" autoplay="false" (ionSlideDidChange)="ionSlideChange(slides)" pager>
<ion-slide>
<ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
<div class="-color1">
<h1>Hi, Welcome!</h1>
</div>
<H3>The new generation of mobile wallets. Send and receive payments all around the world through your mobile phone.</H3>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
</ion-slides>
<ion-button
expand="full"
color="Blue"
size="large"
(click)="next()">
<div class="parent"> {{buttonName}} </div>
</ion-button>
</ion-content>
home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChildren('slides') slides: IonSlides;
buttonName = "Next";
selectedSlide :any;
slideOpts = {
loop: true,
autoplay: true
};
constructor() {}
ionSlideChange(slides){
this.selectedSlide = slides;
slides.getActiveIndex().then(
(slidesIndex)=>{
if (slidesIndex == 5){
this.buttonName = "Continue";
} else{
this.buttonName = "Next";
}
});
}
next(){
this.selectedSlide.getActiveIndex().then((slidesIndex) => {
if(slidesIndex == 5){
console.log("Done Slider");
} else {
this.selectedSlide.slideNext();
}
});
}
}
Console when I press the next button
ERROR TypeError: slides.getActiveIndex is not a function
at HomePage.ionSlideChange (home.page.ts:29)
at Object.eval [as handleEvent] (HomePage.html:22)
at handleEvent (core.js:38098)
at callWithDebugContext (core.js:39716)
at Object.debugHandleEvent [as handleEvent] (core.js:39352)
at dispatchEvent (core.js:25818)
at core.js:37030
at HTMLElement.<anonymous> (platform-browser.js:1789)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
View_HomePage_0 @ HomePage.html:21
proxyClass @ compiler.js:19436
logError @ core.js:39651
handleError @ core.js:9162
dispatchEvent @ core.js:25822
(anonymous) @ core.js:37030
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:34182
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
emit @ core-ca0488fc.js:1999
(anonymous) @ swiper.bundle-ccdaac54.js:1078
(anonymous) @ swiper.bundle-ccdaac54.js:1077
emit @ swiper.bundle-ccdaac54.js:1071
transitionEnd$1 @ swiper.bundle-ccdaac54.js:1906
slideTo @ swiper.bundle-ccdaac54.js:1994
init @ swiper.bundle-ccdaac54.js:3919
Swiper @ swiper.bundle-ccdaac54.js:3762
initSwiper @ ion-slide_2-md.entry.js:231
async function (async)
initSwiper @ ion-slide_2-md.entry.js:229
(anonymous) @ ion-slide_2-md.entry.js:71
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
nextTick @ core-ca0488fc.js:156
(anonymous) @ core-ca0488fc.js:95
(anonymous) @ core-ca0488fc.js:1219
then @ core-ca0488fc.js:1341
scheduleUpdate @ core-ca0488fc.js:1219
schedule @ core-ca0488fc.js:1764
initializeComponent @ core-ca0488fc.js:1775
async function (async)
initializeComponent @ core-ca0488fc.js:1713
(anonymous) @ core-ca0488fc.js:1851
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
resolvePromise @ zone-evergreen.js:791
(anonymous) @ zone-evergreen.js:707
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1
HomePage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}
Ok guys I made a very silly mistake. I should have added #slides in ionslides in the html page. I hope this helps everyone else
home.html
<ion-content>
<ion-row>
<ion-col>
<div class="ion-text-right">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-title>
<ion-button routerDirection="root" [routerLink]="['/home-ar']">
العربية
</ion-button>
</ion-title>
</ion-buttons>
</div>
</ion-col>
</ion-row>
<ion-slides
#slides [options]="slideOpts" autoplay="false"
(ionSlideDidChange)="ionSlideChange(slides)" pager>
<ion-slide>
<ion-img cache="true" src="../assets/Slides/_logo.png"></ion-img>
<div class="-color1">
<h1>Hi, Welcome!</h1>
</div>
<H3>The new generation of mobile wallets. Send and receive payments all
around the world through your mobile phone.</H3>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
</ion-slides>
<ion-button
expand="full"
color="Blue"
size="large"
(click)="next()">
<div class="parent"> {{buttonName}} </div>
</ion-button>
</ion-content>
home.ts
import { Component, ViewChild, ViewChildren } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Slides } from 'ionic-angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChildren('slides') slides: IonSlides;
buttonName = "Next";
selectedSlide :any;
slideOpts = {
loop: true,
autoplay: true
};
constructor() {}
ionSlideChange(slides){
this.selectedSlide = slides;
slides.getActiveIndex().then(
(slidesIndex)=>{
if (slidesIndex == 5){
this.buttonName = "Continue";
} else{
this.buttonName = "Next";
}
});
}
next(){
this.selectedSlide.getActiveIndex().then((slidesIndex) => {
if(slidesIndex == 5){
console.log("Done Slider");
} else {
this.selectedSlide.slideNext();
}
});
}
}