Angular 6: get reference to Components created with *ngFor inside ng-container tag

Question

I'using ng-container to iterate on a list and create components

    <ng-container *ngFor="let f of optionsList; let i = index;">

                <!-- component-->
                <app-component  #fieldcmp  *ngIf="isAppComponent(f)" ></app-field>


                <!--another components-->
                <app-anoter-component1 *ngIf="isAnotherComponent1(f)"> </app-anoter-component1>
...
                <app-anoter-componentn *ngIf="isAnotherComponentn(f)"> </app-anoter-componentn>

            </ng-container>

I would to list of References components inside ng-container.

I tried to use @ViewChildren('#fieldcmp') fieldsList: QueryList; and @ContentChildren('#fieldcmp') fieldsList: QueryList; inside father component but i get no elements if I try to acces in ngafterViewInit

ngAfterViewInit() {
        this.fieldsList.forEach((child) => {  /* some logic....*/});
    }

Can someone can help me? Thanks

-----------Update -----------------------

after fix with @ViewChildren('fieldcmp') I have a list of ElementRef instead of my AppComponent. I cast it with and all work

this.filedsList 
            .forEach((child) => { atLeastOneRequired = atLeastOneRequired || (<ReusableFieldComponent> child).isRequired();
    });

thank you to help

Answer 1

Just remove the # sign from your ViewChildren selector - that is used only in templates:

@ViewChildren('fieldcmp') fieldsList: QueryList;

Or you could use component class as a selector:

@ViewChildren(HelloComponent) fieldsList: QueryList<HelloComponent>;

Working stackblitz here: https://stackblitz.com/edit/angular-xeudlp

Answer 2

Try create and empty directive, then query your Directive and read the ElementRef.

@ViewChildren(MyDirective, {read: Element Ref}) Kids: QueryList<ElementRef>;

I don't have my computer in front of me but that's the idea.