Access dynamically loaded child component instance

Question

@ViewChild(ComponentType) comp!: ComponentType;

ngAfterViewInit() {
  console.log('ComponentType instance', comp);
}

To get hold of a child component's instance, I know that ViewChild can be used as shown above. It works for statically added components, but if I use it on a dynamically added component as demonstrated here on StackBlitz, I get undefined on ngAfterViewInit.

What's the proper way to get hold of a dynamically loaded child component's instance?

So you try to access a grandchild in your parent? Not possible as far as I know. What exactly are you trying to do with your grandchild? — MoxxiManagarm, Nov 21 '22 at 11:42
In my actual case, I want to call an instance method, @MoxxiManagarm. Actually it doesn't work even for direct child. Let me edit to demo it. — karthikaruna, Nov 21 '22 at 11:56

Flo · Accepted Answer · 2022-11-21T16:06:48.733

This is not possible. Angular doesn't get children created dynamically with ViewChild/ViewChildren. See https://github.com/angular/angular/issues/45771 and https://stackoverflow.com/a/43957857/4472932.

But you can save the created childs in a service as example. The component self is const componentRef = viewContainerRef.createComponent<AdComponent>(adItem.component); the componentRef. So a children of ViewChildren/ViewChild is the same like componentRef.

Greetings, Flo

Access dynamically loaded child component instance

1 Answers1