Multi-layer Angular Content Projection?

Preface: I am trying to accomplish something I'm not sure is possible in angular.

I have a component that uses multi-slot projection, as so:

parent.html:

<my-component>
<item slot="header"></item>
<item slot="main"></item>
</my-component>


my-component.html:

<header class="header">
<ng-content select="[slot=header]"></ng-content>
</header>
<main class="main">
<ng-content select="[slot=main]"></ng-content>
</main>


That works.

Now, is there a way to allow for a second layer of content projection, where I pass another slot within the first.

Using the same example, but adding in an additional component:

parent.html:

<my-component>
<item slot="header">
<nav slot="nav">...</nav> <!-- THIS -->
...
</item>
<item slot="main"></item>
</my-component>


my-component.html:

<my-header-component>
<ng-content select="[slot=header]"></ng-content>
</my-header-component>
<main class="main">
<ng-content select="[slot=main]"></ng-content>
</main>


my-header-component.html:

<header class="header">
<ng-content select="[slot=nav]"></ng-content> <!-- and THIS -->
<div class="additional-content">
<ng-content></ng-content>
</div>
</header>


Is something like that possible? or do I need to rethink what I'm doing.

Continue reading...