Search code examples
javascriptangularionic2viewchild

Use ViewChild for dynamic elements - Angular 2 & ionic 2

I want to use multiple IonicSlides that I added dynamically. But I can't use @viewChild. please suggest a way to resolve this problem.

Template.html :

<div *ngFor="let name of title;let i = index;">
    <ion-slides  id="something" #slides>
        //some code
    </ion-slides>
</div

Component.ts :

  @ViewChild('slides') slides: QueryList<Slides>;

  ....

  ngAfterViewInit(){
        setTimeout(()=>{
              alert(this.slides.toArray()); //this line rise error 
        }, 3000);
  }

Error :

_this.slides.toArray is not a function

Solution

  • Use @ViewChildren instead of @ViewChild , Read More

    @ViewChild :

    You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

    @ViewChildren :

    You can use ViewChildren to get the QueryList of elements or directives from the view DOM.