So, for illustration purposes lets say I have two ponents

• tabset
  • tabitem

where tabset is the parent that has many tabitems

• tabset
  • tabitem1
  • tabitem2
  • tabitem3
  • etc...

So, depending on how many tabitems there are inside tabset I will calculate some stuff...

so, how do I get the item count?

(the item count should be accessible in the child ponent)...

so I have reference of the parent like this

<tabset #tabset>
    <tabitem [tabset]="tabset">....</tabitem>
    <tabitem [tabset]="tabset">....</tabitem>
    <tabitem [tabset]="tabset">....</tabitem>
</tabset>

So how do I go from here? When in the life-cycle of tabset I will know how many elements there are actually in? and do I need to use vanilla javascript with ElementRef and getElementsByTagName ? Or is there any other, more angular friendly way?

One extra question.... how can I pass the ponent's reference via ng-content?

tabset.html

<div class="...." #tabset>
    <ng-content></ng-content>

So, for illustration purposes lets say I have two ponents

• tabset
  • tabitem

where tabset is the parent that has many tabitems

• tabset
  • tabitem1
  • tabitem2
  • tabitem3
  • etc...

So, depending on how many tabitems there are inside tabset I will calculate some stuff...

so, how do I get the item count?

(the item count should be accessible in the child ponent)...

so I have reference of the parent like this

<tabset #tabset>
    <tabitem [tabset]="tabset">....</tabitem>
    <tabitem [tabset]="tabset">....</tabitem>
    <tabitem [tabset]="tabset">....</tabitem>
</tabset>

So how do I go from here? When in the life-cycle of tabset I will know how many elements there are actually in? and do I need to use vanilla javascript with ElementRef and getElementsByTagName ? Or is there any other, more angular friendly way?

One extra question.... how can I pass the ponent's reference via ng-content?

tabset.html

<div class="...." #tabset>
    <ng-content></ng-content>

• javascript
• angular

• 1 You could use @ContentChildren(TabItem) items: QueryList<TabItem>; – Paul Samsotha Commented Oct 13, 2016 at 14:06

1 Answer 1

@ContentChildren(TabItem) tabItems: QueryList<TabItem>;

ngAfterContentInit() {
  console.log(this.tabItems.length);
}

Note: TabItem can be a ponent too, not only a directive