Angular Dynamic component ViewChildren always undefined

Question

based on this stack overflow post (Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList), I'm trying to add dynamic component in an ngFor.

The issue is that the ViewChildred referencing the ng template is always undefined

Here my template

<div *ngFor="let service of loadedServices; let i = index;">
  <accordion [closeOthers]="true">
    <accordion-group panelClass="b0 mb-2">
      <div accordion-heading>
        <small>
          <em class="fa fa-plus text-primary mr-2"></em>
        </small>
        <span><b>{{service.description}}</b></span>
      </div>

      <ng-template #serviceBookmark></ng-template>


    </accordion-group>
  </accordion>
</div>

Here my component

export class DatasourceDetailsComponent implements OnInit,AfterContentInit  {
constructor(private resolver: ComponentFactoryResolver) { }

@ViewChildren('serviceBookmark', { read: ViewContainerRef })
public dynComponents: QueryList<ViewContainerRef>;

ngAfterContentInit() {
    this.dynComponents.map(
      (vcr: ViewContainerRef, index: number) => {
        const factory = 
    this.resolver.resolveComponentFactory(ServiceFormComponent);
    vcr.createComponent(factory);
  }
);
}
}

Unfortunately in AfterContentInit the dynComponent is always undefined... What I'm doing wrong?

Thanks

tano · Accepted Answer · 2019-09-23 09:49:46Z

1

You should try with ngAfterViewInit or a setter:

components: QueryList<ViewContainerRef>;

@ViewChildren('serviceBookmark', { read: ViewContainerRef })
set dynComponents(comps: QueryList<ViewContainerRef>) {
    console.log(comps);
    this.components = comps;
}

This should work.

edited Sep 23, 2019 at 9:49

answered Sep 23, 2019 at 9:16

tano

2,8271 gold badge18 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Davide.77 Over a year ago

there is probably an issue... comps is a ViewContainerRef in your sample... and dynComponents is defined as QueryList<ViewContainerRef>... It gives me error... could you please help me? I'm new to angular. thanks

tano Over a year ago

Sorry, I've fixed the example

Collectives™ on Stack Overflow

Angular Dynamic component ViewChildren always undefined

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related