angularionic-frameworkslideionic4ion-slides

Ionic v4 and Angular Cannot able to get the inner text of ion-slide of loop generated slides


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.


Solution

  • 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.