ViewChild access custom component in ion-slide

@Lars-B wrote:

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

Posts: 1

Participants: 1

Read full topic