Access multiple viewchildren using viewchild

Question

I have created a custom component which i have placed in a for loop e g   lt div  ngFor  let view of views  gt         lt customcomponent gt  lt  customcomponent gt    lt  div gt    The output of which will be    lt customcomponent gt  lt  customcomponent gt   lt customcomponent gt  lt  customcomponent gt   lt customcomponent gt  lt  customcomponent gt    I would like to know how i can get a reference to these components using  viewchild syntax or any other means when the number of these components can vary   when the component can be given a name e g   lt customcomponent  compID gt  lt  customcomponent gt    I can then reference it as follows    ViewChild  compID   test  CustomComponent   How do i reference it when this is not the case e g using an index possibly    This question does not relate to using ElementRef as per other questions that have been previously asked as can be seen by the answers listed below  This question relates to the accessing multiple  ViewChild and using list queries

User · Answer

Use the  ViewChildren decorator combined with QueryList  Both of these are from   angular core    ViewChildren CustomComponent  customComponentChildren  QueryList lt CustomComponent gt    Doing something with each child looks like  this customComponentChildren forEach  child    gt    child stuff    y      There is further documentation to be had at angular io  specifically  https   angular io docs ts latest cookbook component-communication html   sts Parent 20calls 20a 20ViewChild

User · Answer

Use  ViewChildren from  angular core to get a reference to the components  template   lt div  ngFor  let v of views  gt       lt customcomponent  cmp gt  lt  customcomponent gt   lt  div gt    component  import   ViewChildren  QueryList   from   angular core        Get handle on cmp tags in the template     ViewChildren  cmp   components QueryList lt CustomComponent gt    ngAfterViewInit           print array of CustomComponent objects     console log this components toArray         l i v e   d e m o

[angular] Access multiple viewchildren using @viewchild

Examples related to angular