angulartypescriptangular2-ngcontent

Angular transclusion when using multiple components

I have three components of following hierarchy: 

<parent-component>
 <wrapper-layer>
   <inner-most>
   </inner-most>
 </wrapper-layer>
</parent-component>

Im confused on how to pass a component from <parent-component> to <inner-most> component Via <wrapper-layer>.

During the transclusion how do I avoid the passed component to be displayed in the <wrapper-layer>.

Solution

  • Since there are no answers. This is how I got it done:

    In <parent-component>: Place the component you wish to pass.

    In <wrapper-layer>: Use the following snippet: 

    <ng-container ngProjectAs="component-to-pass">
            <ng-content select="component-to-pass"></ng-content>
</ng-container>

    In <inner-most>: <ng-content select="component-to-pass"></ng-content>.

    By doing this way, the passed component does not get rendered in the middle layer but instead gets passed into the <inner-most> component.