Hi,
I have problems to get to a reference to a custom component which is hosted inside of a ionic slide.
HTML
......
<ion-slides effect="slide" (ionSlideDidChange)="onSlideChanged()">
<ion-slide *ngFor="let number of [1,2,3];" attr.data-field-number="{{number}}">
<myComponent #myComponent fieldnumber="{{number}}"></myComponent>
</ion-slide>
</ion-slides>
.......
Script
export class MyPage {
....
@ViewChild('myComponent') myComponents: QueryList<MyComponent>
.....
private onSlideChanged() : void {
let currentIndex = this.slides.getActiveIndex();
// That fails, because this.myComponents is undefined
let myComponentArray = this.myComponents.toArray();
}
......
}
Everything is working fine. The slider is rendered and I can slide through my components, but I can get no reference to the QueryList of my components. After the slides have been rendered, the #myComponent ids simply have been removed from the markup and at this.myComponents there is no QueryList created. I don’t understand why it should not be possible to reference components inside of a ion-slide. Is that a bug or do I have a wrong understanding of how it should work?
As I mentioned everything works and renders as expected except the reference to my components.
Cheers,
Lars