1

I have a very simple ngFor 

<div *ngFor="let service of loadedServices; let i = index;">
   <div>
   </div>
</div>

Depending on the service I have to load a different component. I've seen that is possible with ComponentFactoryResolver (https://angular.io/guide/dynamic-component-loader#targetText=Dynamic%20component%20loadinglink&targetText=This%20makes%20it%20impractical%20to,API%20for%20loading%20components%20dynamically.)

But the example shows how to add a single component to a single element in the HTML.

How can I add component to each item created by the ngFor?

Thanks to all

Davide.77
  • 165
  • 2
  • 12
  • So did you try and achieve what you want, for example with the help of the link you provided? – AT82 Sep 20 '19 at 14:07
  • of course, but I'm pretty new, and I failed... I don't know how to dynamically get a reference to the div created in the ng for... – Davide.77 Sep 20 '19 at 14:08
  • okay, perhaps show what you tried and where you are facing issue. SO is mainly for helping people with a specific programming problem. As this question currently sits, at least in my opinion it's very broad. – AT82 Sep 20 '19 at 14:09
  • yeah I would like to show you something, but I'm stucked at the code showed, because I can't get a reference to the nested div... I see everywhere that elements are referred with "#" in a static way, but I don't know how to reference a list of element... Hope that my problem is clear, by the way thanks for your interesting – Davide.77 Sep 20 '19 at 14:12
  • for example look at this: https://stackblitz.com/edit/angular-ftvwwq there is a list of div with static id. Is it possible to generate these id dnamically? – Davide.77 Sep 20 '19 at 14:15
  • Looking for something like this? https://stackblitz.com/edit/angular-15kcl3?file=app/app.component.html – AT82 Sep 20 '19 at 14:25
  • See [**Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList**](https://stackoverflow.com/q/57721310/1164465) – Christopher Peisert Sep 20 '19 at 14:46
  • Possible duplicate of [Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList](https://stackoverflow.com/questions/57721310/angular-dynamic-components-viewchildren-get-viewcontainerref-for-every-compone) – Christopher Peisert Sep 20 '19 at 14:46

1 Answers1

0

You can use like this:

  <comp-selector *ngFor="let sec of page.Sections;" id="{{sec.Id}}"></comp-selector>

Here: comp-selector is the selector.

rafi muhammad
  • 194
  • 2
  • 11