Impossible to use ion-slides methods (No provider for ChangeDetectorRef) - ionic-framework

Question

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

Answer 1

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());
}

Answer 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()" >