angular 8: single ng-container for multiple view child references

Question

I have three viewchild decorators in my component like this:

@ViewChild('propertiesPage1', { read: ViewContainerRef, static: true }) propertiesPage11: ViewContainerRef;
@ViewChild('propertiesPage2', { read: ViewContainerRef, static: true }) propertiesPage22: ViewContainerRef;
@ViewChild('propertiesPage3', { read: ViewContainerRef, static: true }) propertiesPage33: ViewContainerRef;

The references of these are provided in the my html file like this:

<div>
  <ng-container #propertiesPage1>
  </ng-container>
</div>
<div>
  <ng-container #propertiesPage2>
  </ng-container>
</div>
<div>
  <ng-container #propertiesPage3>
  </ng-container>
</div>

I want to merge all the three containers into single one and that ng-container should contain reference only to the viewchild which has changed recently. Something like this:

<div>
  <ng-container #propertiesPage>
  </ng-container>
</div>

How can I achieve it?

Answer 1

@ViewChild decorator is only for one child. To get array of children you need to use @ViewChildren

Try like this:

 @ViewChildren('propertiesPage') pages: QueryList<ViewContainerRef>