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


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>

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?


<div class="...." #tabset>


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

ngAfterContentInit() {

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

Leave a Reply

(*) Required, Your email will not be published