0

I have one parent component and multiple child components.

<parent>
  <child1></child1>
  <child2></child2>
  ...
</parent>

In order to communicate between parent child either I can make use of event decorators (@Input/@Output). Alternately I can make use of multiple @ViewChild like below to access child properties and methods. (Not considering services and Observables)

@ViewChild('child1') child1: Child1;
@ViewChild('child2') child2: Child2; 
//.... so on

I dont want to use event decorators as well as multiple @ViewChild to store the reference of each child components.

Is there any way in angular similar to @ViewChild where I can get the reference of all the child's in one variable and I can iterate on to that variable to access the properties and methods of each child ?

Any help is appreciated !!!

shreyansh
  • 1,637
  • 4
  • 26
  • 46

1 Answers1

0

If you mean children which are the same components, not and in example, and you really have multiple component instances like:

<some-container>
  <app-child></app-child>
  <app-child></app-child>
  <app-child></app-child>
</some-container>

Then you can get all of them by @ViewChildren decorator as I provided below:

@ViewChildren(AppChildComponent) public QueryList<AppChildComponent>;

And you can iteratee them with 'forEach' method which are exists in QueryList.

srjkaa
  • 336
  • 1
  • 5
  • 1
    You are repeating the same child . In my case all child's are different one. (child1, child2 .. and so on ) – shreyansh Jun 28 '19 at 06:53