0

I have a ListComponent that basically loops on an array of objects with ngFor + some functionality.

I would like to be able to pass different 'item' components as content of the ListComponent like this:

<list-component>
    <item-component [SomeInput]="someInput">
        <some-content></some-content>
    </item-component>
</list-component>

and in another place:

<list-component>
     <different-item-component [SomeInput]="someInput">
         <some-content></some-content>
     </different-item-component>
</list-component>

and then in my ListComponent

<ul>
    <li *ngFor="let item of items">
        <!-- ng-content can be different item components -->
        <ng-content [Item]="item" ></ng-content>
    </li>
</ul>

I know that ng-content is static and the item can't be passed as input. (It's just to illustrate the wanted behavior...)

I've tried to achieve this using template and TemplateRef like in this answer

but it only works if I place the template tag directly inside the <list-component> doesn't work if I place the template inside the item-component's template and use it as above.

How can I make it work or is there a different way to achieve this?

Community
  • 1
  • 1
naomi
  • 2,583
  • 2
  • 22
  • 39
  • You can add arbitrary components using `ViewContainerRef.createComponent()`. You can find an example how to use it with `*ngFor` in http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468. If you want to add content created or loaded at runtime you can use something like http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 but that currently doesn't work with AoT. – Günter Zöchbauer Mar 09 '17 at 07:18
  • It doesn't look like the same case, I want to pass the `dynamic-item-component` (that could have it own inputs and content..) as content of the `list-component` when I use it. – naomi Mar 09 '17 at 07:26
  • Not sure what you mean. The example I linked to allows you to pass arbitrary components. You can't do input binding with dynamically added components (same as with components added by the router). The linked answer shows how to do it. You can have inputs on the wrapper element that are forwarded to `dynamic-item-component`. – Günter Zöchbauer Mar 09 '17 at 07:29
  • If I need to have the inputs on the wrapper component, then I better create separate list components for each kind of item - very disappointed there is no way to achieve :( – naomi Mar 09 '17 at 07:35
  • how many item-component do you have ? If you have just 1 or 2 , why not use *ngIf ? Something like `` and `` – mickdev Mar 09 '17 at 09:21
  • When you say it doesn't work when you place the template inside the `item-component`, what do you mean? Do you mean that your TemplateRef doesn't find the element? I wonder if you could use a ContentChild to get the `item-component` and then somehow navigate to it's children. – Justin Mar 09 '17 at 16:48
  • This may not be supported: https://github.com/dart-lang/angular2/issues/195 – Justin Mar 09 '17 at 17:28

0 Answers0