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

I think it should be just `@ViewChildren('fieldcmp')` (no `#` sign, that is used only in template) — Martin Adámek, Sep 13 '18 at 10:56

Martin Adámek · Accepted Answer · 2018-09-13T11:04:54.023

6

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

edited Sep 13 '18 at 11:04

answered Sep 13 '18 at 10:59

Martin Adámek

16,771
5
45
64

after fix with @ViewChildren('fieldcmp') I have a list of ElementRef instead of my AppComponent. How can I cast it or convert in my component type? – raffaeleambrosio Sep 13 '18 at 12:57
use the other approach to get component instances (with `@ViewChildren(HelloComponent)`) – Martin Adámek Sep 13 '18 at 12:58
with @ViewChildren(HelloComponent) I have lenght = 0. I think that the problem is that the components are inside a . For this one exists @ContentChildren but replacing to ViewChildren I have no references too. – raffaeleambrosio Sep 13 '18 at 13:02
Well it is working for me, see the stackblitz example I provided. I also changed the container element to `ng-container` and still working as expected. – Martin Adámek Sep 13 '18 at 13:04
I use casting, it's working. thank you for the time spent – raffaeleambrosio Sep 13 '18 at 13:09
Btw you could just set the type to `QueryList` instead of casting (like I did in the other approach). – Martin Adámek Sep 13 '18 at 13:13

score 0 · Answer 2 · answered Sep 13 '18 at 11:03

0

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.

answered Sep 13 '18 at 11:03

dK-

582
3
12

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

2 Answers2

Linked