4

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

Reza
  • 18,865
  • 13
  • 88
  • 163

1 Answers1

0

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

miladfm
  • 1,508
  • 12
  • 20
  • my goals is to display all 3 tabs there, I didn't get how ngIf can solve the issue, can you please kindly fork the stackblitz and propose your solution there – Reza Aug 03 '18 at 17:08
  • But what if the target is not a child of another component? Meaning, `` alongside `
    `.     – Cody Sep 15 '20 at 18:25
  • You have to send a template of the content somehow to the component, that will show tabs. then use *ngTemplateOutlet to render the template. (``) – miladfm Sep 16 '20 at 11:17