ViewChild access custom component in ion-slide [solved]

Ionic Framework ionic-v3
1

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

2

Maybe not the problem but with a QueryList, shouldn’t u use ViewChildren instead of ViewChild ?

@ViewChildren ... : QueryList ...

@ViewChild .... : ElementRef/Content/Whatever a single element

Have you try also ContentChildren?

3

Just checked my code, with slider what I do is referencing the all slider (which I could confirm works fine). Like following:

<ion-slides #mySlider pager="false">
</ion-slides>

@ViewChild('mySlider') slider: Slides;

Slides offers several features/methods, maybe one of them will suits your goal?

4

Hi,

thanks for the quick response! Was my fault :frowning: Must be @ViewChildren.

Cheers,
Lars

1 Like
5

So solved with ViewChildren?

6

Yes, with @ViewChildren .

1 Like
7

Btw. you could then mark your issue as solved, looks like you didn’t yet :wink: