How to select content from inner children in ng-content

Question

I have a component called tab which has <ng-content select="[tabItem]"></ng-content>

Sometimes tabItem is inside other child components. My problem is Angular selects the content from direct children, not inner children (app-my-tab), is there any way to do it?

app.component.html

<app-tabs>
    <div tabItem>
        Tab 1
    </div>
    <div tabItem>
        Tab 2
    </div>
    <app-my-tab></app-my-tab>
</app-tabs>

my-tab.component.html

<div tabItem> 
  My Tab
</div>
<div>
  Other content
</div>

See this stackblitz

Answer 1

There is no solution for deep selection. I thing it is logical, because:

1. understand and real code easily
2. easy to debug.

If you want really do that use *ngIf in app-my-tab.

To use *ngIF:

1. All element in app-tabs must have tabItem attribute
2. send your condition to show/hide some other element in to app-my-tab component. and app-my-tab receive it as @Input() property
3. in app-my-tab html use *ngIf to show or hide some element

Example: https://stackblitz.com/edit/deep-ng-content-2gyttv?file=src/app/app.component.html