4

I want to use ion-slides method getActiveIndex() but when I import ion-slides as a provider, I have this error :

NullInjectorError: No provider for ChangeDetectorRef!

I don't know why I have to add this to providers. Even if I add this, I have the other provider: ElementRef...

If you have a look at my code, could you tell me if I'm doing something wrong?

thanks!

liste.page.ts :

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

@Component({
  selector: 'app-liste',
  templateUrl: './liste.page.html',
  styleUrls: ['./liste.page.scss'],
})

export class ListePage {

  constructor(private ionSlides: IonSlides) { }

  slideChanged() {
     console.log(this.ionSlides.getActiveIndex());
    }

}

liste.page.html:

<ion-slides [options]="sliderConfig" (ionSlideTransitionEnd)="slideChanged()">
  <ion-slide *ngFor="let item of items; let i = index">
   {{item.name}}
  </ion-slide>
</ion-slides

Ionic Info:

ionic (Ionic CLI)             : 4.9.0 
Ionic Framework               : @ionic/angular 4.1.2
@angular-devkit/build-angular : 0.13.6
@angular-devkit/schematics    : 7.2.4
@angular/cli                  : 7.3.6
@ionic/angular-toolkit        : 1.4.1
1

2 Answers 2

6

In your liste.page.html use:

<ion-slides pager="true" #slides>

Then you can reference it in your liste.page.ts file with:

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

[...] 

export class ListePage {
@ViewChild('slides', { read: IonSlides }) slides: IonSlides; // <----

Then you have access to slides and can call getActiveIndex();

slideChanged() {
  console.log(this.slides.getActiveIndex());
}
2

Below worked for me

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

[...] 

export class ListePage {
  @ViewChild('sliderRef', { static: true }) slides: IonSlides;
  
   slideChanged(){
    this.slides.getActiveIndex().then((val) =>{
      console.log(val);
   });
<ion-slides #sliderRef pager="true" [options]="slideOpts" (ionSlideDidChange)="slideChanged()" >

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.