I am having an array displayed in <ion-slide>
using *ngFor
looping around a defined array:
status: string[] = [
'Active',
'Inactive',
'Ended'
];
@ViewChild('slideWithNav') slides: IonSlides;
@ViewChild('status') slide: IonSlide;
And here is the html script:
<ion-slides class="fullWidth" [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange($event)">
<ion-slide #status *ngFor="let s of status" >
<ion-col>
{{s}}
</ion-col>
</ion-slide>
</ion-slides>
When a slide change, I need to get the value of s
, to run a specific function.
I tried to access it using (ionSlideDidChange)
:
SlideDidChange(s) {
console.log(this.slides);
}
But I can't find anything related to <ion-slide>
inner value.
I tried the following script:
import { Slides } from 'ionic-angular';
import { ViewChild, ViewChildren, QueryList } from '@angular/core';
@ViewChildren('CardSlider') cardSliders: QueryList<Slides>;
onCardChanged(){ let slides= this.slides.toArray();
let slider= slides[this.currentSuitIndex];
this.currentCardIndex[this.currentSuitIndex] = cardSlider.getActiveIndex();
console.log('Status', slider.getActiveIndex());
}
But it didn't work either. The required output, is when I am in the Active
Slide, I need to console "Active" and run the required method.
I found the solution. Apparently the activated index is a promise:
SlideDidChange(s)
{
this.slides.getActiveIndex().then(
(index)=>{
this.currentIndex = index;
});
}
By using .then()
we can get the current index, and use SWITCH
case to case indexes and run the required methods accordingly.