Multiple dynamic content projection

Need advice about best way how to make multiple dynamic content projection. Situation, than we have parrent component template like this:

<tabs [count] = 'n'>
    <div tab_1>...</div>
    <div tab_2>...</div>
    ...
    <div tab_n-1>...</div>
    <div tab_n>...</div>
</tabs>

And expected that child (Tabs) component template will be like that:

...
<ng-content select='[tab_1]'></ng-content>
<hr/>
<ng-content select='[tab_2]'></ng-content>
...
<ng-content select='[tab_n-1]'></ng-content>
<hr/>
<ng-content select='[tab_n]'></ng-content>
...

In this case we have a problem, because we can’t use ng-content like this one:

<div *ngFor="let item of [1, 2, ... , n - 1, n]]"> 
    <ng-content select='[tab_{{n-1}}]'></ng-content>
</div>

ng-content select is static, we can’t use expression here.

How we can get array of content childs to use it in *ngFor?

[alxhub]

@DenisRoss: As others have mentioned, a pretty standard way to do this is to use a template directive, and query for TemplateRefs directly. Here’s an example for you.

I’m going to close this issue as there is no bug or feature request here for Angular, but please let me know if that example clarifies things for you.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}