Search code examples
angularangular-content-projection

Angular content projection using ng-content only working on root level?

I'm trying to select elements in ng-content, but seems to work only if the element is on content's root level

root component

<app-wrapper>
<div class="root">Test1</div>
<div>
<div class="sub">Test2</div>
</div>
</app-wrapper>

child component - works as expected

<ng-content select=".root"></ng-content>

child component - no content selected

<ng-content select=".sub"></ng-content>
Solution

  • Yes this is a limitation of content projection.

    Only 1st level children are matched for content projection.