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
– happyfirst, Commented Aug 21, 2023 at 21:24
You should share more code or even a stackblitz of your issue to investigate what your issue really is ! — Matthieu Riegler
– Matthieu Riegler, Commented Aug 21, 2023 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
– happyfirst, Commented Aug 21, 2023 at 22:26
Without a repro this is hardly actionnable. did you check the dom, are the spans created ? — Matthieu Riegler
– Matthieu Riegler, Commented Aug 21, 2023 at 22:58

happyfirst · Accepted Answer · 2023-08-22 14:52:26Z

0

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.

answered Aug 22, 2023 at 14:52

happyfirst

1,1671 gold badge13 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

ngFor not working inside dynamically loaded components

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related