ngFor not working inside dynamically loaded components

Question

My 16.1.4 angular app is dynamically loading a component. Inside that component I have an array and am trying to use ngFor. ngFor will not display anything. If I show the number of entries in the array I'm trying to loop it correctly shows the right number. It just won't loop through my array. No errors in console either.

START BREADCRUMB: {{components.length}}
   <span *ngFor='let component of components;'>
      {{component.title}}
   </span>
END

All that renders in my browser is START BREADCRUMB: 2 END

In other components that are not dynamically loaded, ngFor works as expected.

Any ideas on how to troubleshoot this?

I am using ComponentFactoryResolver and createComponent to dynamically create my child components and then it's rendered in an ng-template — happyfirst, Aug 21 '23 at 21:24
You should share more code or even a stackblitz of your issue to investigate what your issue really is ! — Matthieu Riegler, Aug 21 '23 at 22:11
I tried. I can't reproduce in StackBlitz. I found a basic dynamic load component example, forked it, added an ngFor and of course it worked. That's why I'm asking on ideas how to troubleshoot an issue like this. All I can think of is something higher up is breaking it? But no errors are logged in console. — happyfirst, Aug 21 '23 at 22:26
Without a repro this is hardly actionnable. did you check the dom, are the spans created ? — Matthieu Riegler, Aug 21 '23 at 22:58
See what `{{components[0]?.title}}` and `{{components | json}}` yield. Outside the loop obviously — Benny Halperin, Aug 22 '23 at 07:01

score 0 · Answer 1 · answered Aug 22 '23 at 14:52

The credit for this answer really should go to @Benny for his comment

Your tip indirectly helped me find the issue. When I tried the json pipe I got an error that it was not found. Googling that error led me to No pipe found which led me to realizing my dynamic component was not declared in my parent module. As soon as I declared it, my ngFor's started working.

ngFor not working inside dynamically loaded components

1 Answers1