Angular ViewChildren from nested ngFor but group them by parent ngFor

Question

When i have nested ngFor how to group children by parent ngFor?

So i had something like this:

html:

<div *ngFor="let item of firstChildrenGroupData">
   <app-child #firstChildrenGroup [data]="item.data"></app-child>
</div>
<button (click)="doSomethingForGroup(firstGroup)">Click here</button>

<div *ngFor="let item of secondChildrenGroupData">
   <app-child #secondChildrenGroup [data]="item.data"></app-child>
</div>
<button (click)="doSomethingForGroup(secondGroup)">Click here</button>

ts:

@ViewChildren('firstChildrenGroup') firstGroup: QueryList<ChildComponent>;
@ViewChildren('secondChildrenGroup') secondGroup: QueryList<ChildComponent>;


doSomethingForGroup(group: QueryList<ChildComponent>) {
   group.foreach(item => {
      item.doAction();
   })
}

And i want to achieve this

html:

<div *ngFor="let group of ChildrenGroups">
   <div #group>
      <div *ngFor="let item of group.childrenData">
         <app-child #child [data]="item.data"></app-child>
      </div>
      <button (click)="doSomethingForGroup(????)">Click here</button>
   </div>
</div>

and this is wrong, because now action will be taken for ALL children if i use this in button but i want to take action only for one group of children per button.

@ViewChildren('child') allChildren: QueryList<ChildComponent>  

@edit: Maybe i could do something like another component <app-parent></app-parent> that will get group data and then inside this ngFor and <app-child></appChild> but i would like to avoid making another component in the middle just for grouping.

Answer 1

you can "filter" the queryList before make something, If I suppose your item.data was a property "groupId"

    <button (click)="doSomethingForGroup(group.groupId)">Click here</button>

doSomethingForGroup(groupId)
{
   this.secondGroup.filter((item:any)=>item.data.groupId==groupId)
                   .forEach(item=>{
                       ...do domething...
                   })
}

If has no property groupId, you can pass as argument group.childrenData

<button (click)="doSomethingForGroup(group.childrenData)">Click here</button>

and use some like

doSomethingForGroup(childrenData)
{
   this.secondGroup.filter((item:any)=>childrenData.find(d=>d==x.item.data))
                   .forEach(item=>{
                       ...do domething...
                   })
}

NOTE: I don't check the code, use only as inspiration

Answer 2

I'd consider making

<div *ngFor="let item of group.childrenData">
         <app-child #child [data]="item.data"></app-child>
</div>
<button (click)="doSomethingForGroup(????)">Click here</button>```

its own component with the group passed in and have the parent iterate over this component. You can avoid using ViewChildren altogether because your button in this new component can use the group data passed to it.