Why doesn't ViewChild see dynamically created divs?

Question

Angular

When a layout is generated in a loop, the one created in this way is not located via ViewChild('component1') Block1;
<div #componentXX></div>

<div class="row">
    <div class="col-3" id="{{block.component_name}}" *ngFor="let block of blocks">
        {{block.component_name}}
        <div [ngSwitch]="block.component_name">
            <div *ngSwitchCase="'DashboardBlock1Component'" style="{{Style1}}"  >
                 <div #component1></div>
            </div>
            <div *ngSwitchCase="'DashboardBlock2Component'" >
                 <div #component2></div>
            </div>
            <div *ngSwitchDefault>
                <div #component3></div>
            </div>
        </div>
    </div>
</div>

What can be done? so that in the generated componentXX it is possible to create components?
without viewContainerRef they cannot be created, but viewContainerRef can only be obtained through ViewChild?
Can I call some function in ngAfterViewInit ?

Answer 1

I recently faced a similar task - I needed to collect all dynamically generated components from the page.
For this, I used the ViewChildren and QueryList decorator.
After that, all components from the page will be available in the combo as an array
. You can also hang an observer on it to track the added components dynamically
. Also, in addition to ViewChildren, there is ContentChildren, maybe it’s just right for you.
It looks like you are digging in this direction.