[Fixed] Angular2: get the count of child components – when in the lifecycle and how

Issue

So, for illustration purposes lets say I have two components

• 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 component)…

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 component’s reference via ng-content?

tabset.html

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

Solution

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

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

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