[SOLVED] ionSlides is undefined

ionSlides is undefined

I have a basic slider in my Ionic 4 project but this.slides is undefined at every point. A few days ago this worked, I just can't figure out why it doesn't work now.

TS-File:

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

export class xyPage implements OnInit {

  @ViewChild(IonSlides, { static: true }) slides: IonSlides;

  constructor() {}


  public getSlideIndex() {
    console.log(this.slides);
    this.slides.getActiveIndex().then((index: number) => {
        this.currentSlideIndex = index;
     });
  }
}

Template:

<ion-slides 
    options="slideOpts" 
    pager="true"
    (ionSlideDidChange)="getSlideIndex()">
        <ion-slide *ngFor="let slide of SlideOptions | keyvalue">
          <div class="slide-image img3 animated fadeIn">
            ...
          </div>
        </ion-slide>
</ion-slides>

Error:

ERROR Error: 
Uncaught (in promise): TypeError: Cannot read property 'getActiveIndex' of undefined

The next and previous buttons with "this.slides.slideNext();" have the same error.

Solution

It was a trivial problem caused by me. Thanks to all those who wanted to help me!

I had an *ngIf="" on the parent element of the slider, that blocked it.

It was probably too obvious to see right away.